<template>
  <div class="main">
    <div id="centerDiv" class="mapcontainer">
      <mars-map :url="configUrl" @onload="onMapload" />
    </div>

    <div class="header">
      <div class="online" style="color: #128be9; font-size: 25px">
        <i class="el-icon-s-custom" style="color: #128be9; font-size: 35px"></i>
        {{ HeaderOnlineHum }}
        <p class="hunText">在线用户</p>
      </div>
      <div class="logo">智慧大顶云平台</div>
      <div class="menu">
        <ul>
          <li
            :class="[activeId != item.id ? 'menuLi' : 'active']"
            v-for="(item, index) in funList"
            @click.stop="handleClick(item)"
            :key="index"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>

      <el-popover
        placement="top-start"
        title="预警详情"
        width="350"
        trigger="hover"
      >
        <div class="city_top">
          <p v-for="(item, index) in warning" :key="index">
            {{ item }}
            <el-divider></el-divider>
          </p>
          <el-divider v-if="warning == ''">暂无预警信息</el-divider>
        </div>
        <div slot="reference" class="right">
          <i
            style="color: #0b64af; font-size: 50px; margin-right: 5px"
            :class="cityClass"
          ></i>

          <div class="right-le" v-if="city">
            <span style="color: #cdcdcd; font-size: 16px"
              >{{ city.temp }}°</span
            >
            <span style="color: #cdcdcd; font-size: 16px">{{ city.text }}</span>
          </div>
          <div class="wind" v-if="city">
            <i style="color: #cdcdcd" class="qi-2386"></i>
            <span style="color: #cdcdcd">{{
              city.windDir + city.windScale + "级"
            }}</span>
          </div>
          <!-- <div class="warnText">
              <ul :class="{ 'move-style': moveFlag }">
                <li v-for="(item, index) in cityList" :key="index"><svg-icon :icon-class="item.icon"
                    style="vertical-align: top; width: 20px" />{{ item.text }}</li>
              </ul>
            </div> -->
        </div>
      </el-popover>

      <div class="logo-right-time">
        <p class="logo-time-hour">
          <span class="mars-icon"
            ><!--?xml version="1.0" encoding="UTF-8"?--><svg
              width="20"
              height="20"
              viewBox="0 0 48 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
                fill="none"
                stroke="#BEE1FF"
                stroke-width="4"
                stroke-linejoin="round"
              ></path>
              <path
                d="M24.0084 12.0001L24.0072 24.0089L32.4866 32.4883"
                stroke="#BEE1FF"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path></svg
          ></span>
          {{ time }}
        </p>
        <p class="logo-time-year">{{ year }} {{ week }}</p>
      </div>
    </div>

    <div class="flBox">
      <div class="leftPanel" v-show="leftShow">
        <div class="panel-item" style="height: 50%">
          <div class="title">
            <img
              src="http://template.hfxtsk.cn/city/static/svg/panel-icon-016a94d6.svg"
              alt=""
            />
            <p>在线人车</p>
            <div class="header-icon"></div>
          </div>
          <div class="panel-content">
            <!-- <v-chart class="chart" :option="option1" /> -->
            <div class="panel-card">
              <div class="panel-card-item" @click="inlineCar('2')">
                <span class="panel-card-item-num">{{
                  unchangedData.length
                    ? unchangedData.filter((item) => item.type != 4).length
                    : "0"
                }}</span>
                <img src="@/assets/images/cheliang@2x.png" alt="" />
                <span class="panel-card-item-text">在线车辆</span>
              </div>
              <div class="panel-card-item" @click="inlineCar('1')">
                <span class="panel-card-item-num">{{
                  unchangedData.length
                    ? unchangedData.filter((item) => item.type == 4).length
                    : "0"
                }}</span>
                <img src="@/assets/images/renyuanqiujiu@2x.png" alt="" />
                <span class="panel-card-item-text">在线人员</span>
              </div>
              <div class="panel-card-item" @click="inlineCar('2')">
                <span class="panel-card-item-num">{{ 300 }}</span>
                <img src="@/assets/images/renshu@2x.png" alt="" />
                <span class="panel-card-item-text">全部设备</span>
              </div>
              <div class="panel-card-item" @click="inlineCar('3')">
                <span class="panel-card-item-num">{{ allEquip.length }}</span>
                <img src="@/assets/images/cheliang@2x.png" alt="" />
                <span class="panel-card-item-text">启用设备</span>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-item" style="height: 50%">
          <div class="title">
            <img
              src="http://template.hfxtsk.cn/city/static/svg/panel-icon-016a94d6.svg"
              alt=""
            />
            <p>边坡监测</p>
            <div
              class="header-icon"
              style="
                position: absolute;
                top: 20px;
                right: 70px;
                width: 10px;
                background-color: transparent;
              "
            >
              <el-button
                type="text"
                icon="el-icon-caret-bottom"
                @click="showEquipPhoto2()"
                >设备</el-button
              >
              <ul v-show="equipLi2" class="weiEquipBox">
                <li
                  v-for="(item, index) in caikuangRegions2"
                  :key="index"
                  @click="changeEquip2(item)"
                >
                  {{ item.DEVICENAME }}
                </li>
              </ul>
            </div>
            <div class="header-icon"></div>
          </div>
          <div class="panel-content">
            <v-chart class="chart" :option="option2" />
          </div>
        </div>
        <!-- <div class="panel-item" style="height: 33.3%">
          <div class="title">
            <img src="http://template.hfxtsk.cn/city/static/svg/panel-icon-016a94d6.svg" alt="" />
            <span></span>
            <div class="header-icon"></div>
          </div> 
          <div class="panel-content">
            <v-chart class="chart" :option="option3" />
          </div>
        </div> -->
      </div>
      <div class="rightPanel" v-show="leftShow">
        <div class="panel-item" style="height: 50%">
          <div class="title">
            <img
              src="http://template.hfxtsk.cn/city/static/svg/panel-icon-016a94d6.svg"
              alt=""
            />
            <p>当日产量</p>
            <div class="header-icon"></div>
          </div>
          <div class="panel-content">
            <!-- <v-chart class="chart" :option="option4" /> -->
            <div class="showImg">
              <!-- //轮播图片@mouseleave="changeInterval(false)" -->
              <div v-if="currentIndex === 0" style="width: 100%; height: 100%">
                <v-chart class="chart" :option="option4" />
              </div>
              <div v-if="currentIndex === 1" style="width: 100%; height: 100%">
                <v-chart class="chart" :option="option5" />
              </div>
              <div v-if="currentIndex === 2" style="width: 100%; height: 100%">
                <v-chart class="chart" :option="option6" />
              </div>
              <div v-if="currentIndex === 3" style="width: 100%; height: 100%">
                <v-chart class="chart" :option="option7" />
              </div>
              <!-- //左侧按钮 -->
              <div @click="clickIcon('up')" class="iconDiv icon-left">
                <i class="el-icon-caret-left"></i>
              </div>
              <!-- //右侧按钮 -->
              <div @click="clickIcon('down')" class="iconDiv icon-right">
                <i class="el-icon-caret-right"></i>
              </div>
              <!-- //控制圆点 -->
              <div class="banner-circle">
                <ul>
                  <li
                    @click="changeImg(0)"
                    :class="currentIndex === 0 ? 'active99' : ''"
                  ></li>
                  <li
                    @click="changeImg(1)"
                    :class="currentIndex === 1 ? 'active99' : ''"
                  ></li>
                  <li
                    @click="changeImg(2)"
                    :class="currentIndex === 2 ? 'active99' : ''"
                  ></li>
                  <li
                    @click="changeImg(3)"
                    :class="currentIndex === 3 ? 'active99' : ''"
                  ></li>
                </ul>
              </div>
            </div>
            <div class="areadatepicker">
              <el-date-picker
                v-model="yieldData"
                type="date"
                value-format="yyyy-MM-dd"
                @change="resetAyelDate()"
                placeholder="选择日期"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="panel-item" style="height: 50%">
          <div class="title">
            <img
              src="http://template.hfxtsk.cn/city/static/svg/panel-icon-016a94d6.svg"
              alt=""
            />
            <p>尾矿库监测</p>
            <div
              class="header-icon"
              style="
                position: absolute;
                top: 40px;
                right: 70px;
                width: 10px;
                background-color: transparent;
              "
            >
              <el-button
                type="text"
                icon="el-icon-caret-bottom"
                @click="showEquipPhoto()"
                >设备</el-button
              >
              <ul v-show="equipLi" class="weiEquipBox">
                <li
                  v-for="(item, index) in weikuangRegions"
                  :key="index"
                  @click="changeEquip(item)"
                >
                  {{ item.DEVICENAME }}
                </li>
              </ul>
            </div>
          </div>
          <div class="panel-content">
            <v-chart class="chart" :option="option9" />
          </div>
        </div>
        <!-- <div class="panel-item" style="height: 33.3%">
          <div class="title">
            <img src="http://template.hfxtsk.cn/city/static/svg/panel-icon-016a94d6.svg" alt="" />
            <span>炸药库</span>
            <div class="header-icon"></div>
          </div>
          <div class="panel-content">
            <img style="width:100%;height: 100%;"
              src="https://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20190929/80f0ca1126e248d489325693ccd9d3de.jpeg"
              alt="">
          </div>
        </div> -->
      </div>

      <!-- <div class="centerPanel centerPanel2" v-show="leftShow">
        <div class="panel-item" style="height: 100%">
          <div class="title">
            <img src="http://template.hfxtsk.cn/city/static/svg/panel-icon-016a94d6.svg" alt="" />
            <span>排污</span>
            <div class="header-icon"></div>
          </div>
          <div class="panel-content">
            <v-chart class="chart" :option="option9" />
            
          </div>
          
        </div>
      </div> -->
      <!-- 视屏监控 -->
      <div class="videoList" :class="showbro2 == true ? 'bro-show' : ''">
        <div class="mars-dialog__header" style="cursor: move">
          <span class="title">{{ equipTitle }}</span>

          <span class="mars-icon close-btn" @click="opType2">
            <svg
              width="18"
              height="18"
              viewBox="0 0 48 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M8 8L40 40"
                stroke="currentColor"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
              <path
                d="M8 40L40 8"
                stroke="currentColor"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path></svg
          ></span>
        </div>
        <div class="mars-dialog__content" v-if="dialogType == '1-11'">
          <ul>
            <li>智能界桩</li>
            <li>电子围栏</li>
            <li>视频监控</li>
            <li>开采监测</li>
            <li>粉尘监测</li>
            <li>噪声监测</li>
            <li>气体监测</li>
          </ul>
        </div>
        <div class="mars-dialog__content" v-if="dialogType == '1-3'">
          <div class="caikuangEquip">
            <template v-if="equipView == '1'">
              <div class="equipItem">
                <div class="title">
                  <img :src="equipImgList[1]" alt="" /><span>GNSS</span>
                </div>
                <div class="equiplist">
                  <p>
                    <span class="equiplist_name">设备名称</span
                    ><span class="equiplist_value">实时值(mm)</span
                    ><span class="equiplist_time">采集时间</span>
                  </p>
                  <p v-for="(item, index) in caikuangRegions2" :key="index">
                    <span v-if="item.type == 1" class="equiplist_name">{{
                      item.DEVICENAME
                    }}</span
                    ><span v-if="item.type == 1" class="equiplist_value">{{
                      item.DX
                    }}</span
                    ><span v-if="item.type == 1" class="equiplist_time">{{
                      item.CREATTIME
                    }}</span>
                  </p>
                </div>
              </div>
              <div class="equipItem">
                <div class="title">
                  <img :src="equipImgList[0]" alt="" /><span>雷达监测</span>
                </div>
                <div class="equiplist">
                  <p>
                    <span class="equiplist_name">设备名称</span
                    ><span class="equiplist_value">实时值</span
                    ><span class="equiplist_time">采集时间</span>
                  </p>
                  <!-- <p v-for="(item, index) in caikuangRegions" :key="index">
                    <span v-if="item.type == 1" class="equiplist_name">{{
                      item.DEVICENAME
                    }}</span
                    ><span v-if="item.type == 1" class="equiplist_value">{{
                      item.DX
                    }}</span
                    ><span v-if="item.type == 1" class="equiplist_time">{{
                      item.CREATTIME
                    }}</span>
                  </p> -->
                </div>
              </div>
              <div class="equipItem">
                <div class="title">
                  <img :src="equipImgList[2]" alt="" /><span>内部位移</span>
                </div>

                <div class="equiplist">
                  <p>
                    <span class="equiplist_name">设备名称</span
                    ><span class="equiplist_value">实时值(mm)</span
                    ><span class="equiplist_time">采集时间</span>
                  </p>
                  <p v-for="(item, index) in caikuangRegions2" :key="index">
                    <span v-if="item.type == 2" class="equiplist_name">{{
                      item.DEVICENAME
                    }}</span
                    ><span v-if="item.type == 2" class="equiplist_value">{{
                      item.DX
                    }}</span
                    ><span v-if="item.type == 2" class="equiplist_time">{{
                      item.CREATTIME
                    }}</span>
                  </p>
                </div>
              </div>
              <div class="equipItem">
                <div class="title">
                  <img :src="equipImgList[3]" alt="" /><span>爆破振动</span>
                </div>

                <div class="equiplist">
                  <p>
                    <span class="equiplist_name">设备名称</span
                    ><span class="equiplist_value">实时值(cm/s)</span
                    ><span class="equiplist_time">采集时间</span>
                  </p>
                  <p v-for="(item, index) in caikuangRegions2" :key="index">
                    <span v-if="item.type == 3" class="equiplist_name">{{
                      item.DEVICENAME
                    }}</span
                    ><span v-if="item.type == 3" class="equiplist_value">{{
                      item.DX
                    }}</span
                    ><span v-if="item.type == 3" class="equiplist_time">{{
                      item.CREATTIME
                    }}</span>
                  </p>
                </div>
              </div>
              <div class="equipItem">
                <div class="title">
                  <img :src="equipImgList[4]" alt="" /><span>地下水位</span>
                </div>

                <div class="equiplist">
                  <p>
                    <span class="equiplist_name">设备名称</span
                    ><span class="equiplist_value">实时值(mm)</span
                    ><span class="equiplist_time">采集时间</span>
                  </p>
                  <p v-for="(item, index) in caikuangRegions2" :key="index">
                    <span v-if="item.type == 4" class="equiplist_name">{{
                      item.DEVICENAME
                    }}</span
                    ><span v-if="item.type == 4" class="equiplist_value">{{
                      item.V1
                    }}</span
                    ><span v-if="item.type == 4" class="equiplist_time">{{
                      item.CREATTIME
                    }}</span>
                  </p>
                </div>
              </div>
            </template>
            <template v-if="equipView == '2'">
              <span style="color: #fff; font-size: 18px">{{
                newEquipData.DEVICENAME
              }}</span>
              <div class="equipEchart">
                <v-chart class="chart" :option="equipEchartOption" />
              </div>
              <div
                class="equipEchart"
                v-if="
                  newEquipData.type == 1 ||
                  newEquipData.type == 2 ||
                  newEquipData.type == 3
                "
              >
                <v-chart class="chart" :option="equipEchartOption1" />
              </div>
              <div
                class="equipEchart"
                v-if="
                  newEquipData.type == 1 ||
                  newEquipData.type == 2 ||
                  newEquipData.type == 3
                "
              >
                <v-chart class="chart" :option="equipEchartOption2" />
              </div>
            </template>
          </div>
        </div>
        <div class="mars-dialog__content" v-if="dialogType == '1-4'">
          <div class="caikuangEquip">
            <template v-if="equipView == '1'">
              <div class="equipItem">
                <div class="title">
                  <img :src="equipImgList[1]" alt="" /><span>GNSS</span>
                </div>
                <div class="equiplist">
                  <p>
                    <span class="equiplist_name">设备名称</span
                    ><span class="equiplist_value">实时值(mm)</span
                    ><span class="equiplist_time">采集时间</span>
                  </p>
                  <p v-for="(item, index) in weikuangRegions2" :key="index">
                    <span v-if="item.type == 1" class="equiplist_name">{{
                      item.DEVICENAME
                    }}</span
                    ><span v-if="item.type == 1" class="equiplist_value">{{
                      item.DX
                    }}</span
                    ><span v-if="item.type == 1" class="equiplist_time">{{
                      item.CREATTIME
                    }}</span>
                  </p>
                </div>
              </div>
              <div class="equipItem">
                <div class="title">
                  <img :src="equipImgList[6]" alt="" /><span>干滩</span>
                </div>
                <div class="equiplist">
                  <p>
                    <span class="equiplist_name">设备名称</span
                    ><span class="equiplist_value">实时值</span
                    ><span class="equiplist_time">采集时间</span>
                  </p>
                  <p v-for="(item, index) in weikuangRegions2" :key="index">
                    <span v-if="item.type == 6" class="equiplist_name">{{
                      item.DEVICENAME
                    }}</span
                    ><span v-if="item.type == 6" class="equiplist_value">{{
                      item.DX
                    }}</span
                    ><span v-if="item.type == 6" class="equiplist_time">{{
                      item.CREATTIME
                    }}</span>
                  </p>
                </div>
              </div>
              <!-- <div class="equipItem">
                <div class="title">
                  <img :src="equipImgList[2]" alt="" /><span>内部位移</span>
                </div>

                <div class="equiplist">
                  <p>
                    <span class="equiplist_name">设备名称</span
                    ><span class="equiplist_value">实时值(mm)</span
                    ><span class="equiplist_time">采集时间</span>
                  </p>
                  <p v-for="(item, index) in weikuangRegions2" :key="index">
                    <span v-if="item.type == 2" class="equiplist_name">{{
                      item.DEVICENAME
                    }}</span
                    ><span v-if="item.type == 2" class="equiplist_value">{{
                      item.DX
                    }}</span
                    ><span v-if="item.type == 2" class="equiplist_time">{{
                      item.CREATTIME
                    }}</span>
                  </p>
                </div>
              </div> -->
              <div class="equipItem">
                <div class="title">
                  <img :src="equipImgList[5]" alt="" /><span>浸润线</span>
                </div>

                <div class="equiplist">
                  <p>
                    <span class="equiplist_name">设备名称</span
                    ><span class="equiplist_value">实时值(mm)</span
                    ><span class="equiplist_time">采集时间</span>
                  </p>
                  <p v-for="(item, index) in weikuangRegions2" :key="index">
                    <span
                      v-if="
                        item.type == 4 &&
                        item.DEVICENAME.slice(0, 3) == '浸润线'
                      "
                      class="equiplist_name"
                      >{{ item.DEVICENAME }}</span
                    ><span
                      v-if="
                        item.type == 4 &&
                        item.DEVICENAME.slice(0, 3) == '浸润线'
                      "
                      class="equiplist_value"
                      >{{ item.DX }}</span
                    ><span
                      v-if="
                        item.type == 4 &&
                        item.DEVICENAME.slice(0, 3) == '浸润线'
                      "
                      class="equiplist_time"
                      >{{ item.CREATTIME }}</span
                    >
                  </p>
                </div>
              </div>
              <div class="equipItem">
                <div class="title">
                  <img :src="equipImgList[8]" alt="" /><span>库水位</span>
                </div>

                <div class="equiplist">
                  <p>
                    <span class="equiplist_name">设备名称</span
                    ><span class="equiplist_value">实时值(mm)</span
                    ><span class="equiplist_time">采集时间</span>
                  </p>
                  <p v-for="(item, index) in weikuangRegions2" :key="index">
                    <span v-if="item.type == 5" class="equiplist_name">{{
                      item.DEVICENAME
                    }}</span
                    ><span v-if="item.type == 5" class="equiplist_value">{{
                      item.DX
                    }}</span
                    ><span v-if="item.type == 5" class="equiplist_time">{{
                      item.CREATTIME
                    }}</span>
                  </p>
                </div>
              </div>
              <div class="equipItem">
                <div class="title">
                  <img :src="equipImgList[4]" alt="" /><span>地下水位</span>
                </div>

                <div class="equiplist">
                  <p>
                    <span class="equiplist_name">设备名称</span
                    ><span class="equiplist_value">实时值(mm)</span
                    ><span class="equiplist_time">采集时间</span>
                  </p>
                  <p v-for="(item, index) in weikuangRegions2" :key="index">
                    <span
                      v-if="
                        item.type == 4 &&
                        item.DEVICENAME.slice(0, 3) != '浸润线'
                      "
                      class="equiplist_name"
                      >{{ item.DEVICENAME }}</span
                    ><span
                      v-if="
                        item.type == 4 &&
                        item.DEVICENAME.slice(0, 3) != '浸润线'
                      "
                      class="equiplist_value"
                      >{{ item.DX }}</span
                    ><span
                      v-if="
                        item.type == 4 &&
                        item.DEVICENAME.slice(0, 3) != '浸润线'
                      "
                      class="equiplist_time"
                      >{{ item.CREATTIME }}</span
                    >
                  </p>
                </div>
              </div>
            </template>
            <template v-if="equipView == '2'">
              <span style="color: #fff; font-size: 18px">{{
                newEquipData.DEVICENAME
              }}</span>
              <div class="equipEchart">
                <v-chart class="chart" :option="equipEchartOption" />
              </div>
              <div
                class="equipEchart"
                v-if="
                  newEquipData.type == 1 ||
                  newEquipData.type == 2 ||
                  newEquipData.type == 3
                "
              >
                <v-chart class="chart" :option="equipEchartOption1" />
              </div>
              <div
                class="equipEchart"
                v-if="
                  newEquipData.type == 1 ||
                  newEquipData.type == 2 ||
                  newEquipData.type == 3
                "
              >
                <v-chart class="chart" :option="equipEchartOption2" />
              </div>
            </template>

            <!-- <div class="equipItem">
              <span>内部位移</span
              ><svg-icon icon-class="neibuweiyi" class="svgIcon" /><em
                >12.0989</em
              ><span class="numTime">12:18:36</span>
            </div>
            <div class="equipItem">
              <span>爆破振动</span
              ><svg-icon icon-class="baopozhendong" class="svgIcon" /><em
                >12.0989</em
              ><span class="numTime">12:18:36</span>
            </div>
            <div class="equipItem">
              <span>降雨量</span
              ><svg-icon icon-class="jiangyuliang" class="svgIcon" /><em
                >12.0989</em
              ><span class="numTime">12:18:36</span>
            </div> -->
          </div>
        </div>
        <div class="mars-dialog__content" v-if="dialogType == '1-5'">
          <!-- <ul>
            <li>
              <svg-icon icon-class="biaomianweiyi" class="svgIcon" />表面位移
            </li>
          </ul> -->
          <div class="caikuangEquip">
            <template v-if="equipView == '1'">
              <div class="equipItem">
                <div class="title">
                  <img :src="equipImgList[1]" alt="" /><span>GNSS</span>
                </div>
                <div class="equiplist">
                  <p>
                    <span class="equiplist_name">设备名称</span
                    ><span class="equiplist_value">实时值(mm)</span
                    ><span class="equiplist_time">采集时间</span>
                  </p>
                  <p v-for="(item, index) in paituRegions2" :key="index">
                    <span v-if="item.type == 1" class="equiplist_name">{{
                      item.DEVICENAME
                    }}</span
                    ><span v-if="item.type == 1" class="equiplist_value">{{
                      item.DX
                    }}</span
                    ><span v-if="item.type == 1" class="equiplist_time">{{
                      item.CREATTIME
                    }}</span>
                  </p>
                </div>
                <div class="equipItem">
                  <div class="title">
                    <img :src="equipImgList[7]" alt="" /><span>渗压计</span>
                  </div>
                  <div class="equiplist">
                    <p>
                      <span class="equiplist_name">设备名称</span
                      ><span class="equiplist_value">实时值(㎡/h)</span
                      ><span class="equiplist_time">采集时间</span>
                    </p>
                    <p v-for="(item, index) in paituRegions2" :key="index">
                      <span
                        v-if="
                          item.type == 7 && item.DEVICENAME != '排土场渗流量'
                        "
                        class="equiplist_name"
                        >{{ item.DEVICENAME }}</span
                      ><span
                        v-if="
                          item.type == 7 && item.DEVICENAME != '排土场渗流量'
                        "
                        class="equiplist_value"
                        >{{ item.DX }}</span
                      ><span
                        v-if="
                          item.type == 7 && item.DEVICENAME != '排土场渗流量'
                        "
                        class="equiplist_time"
                        >{{ item.CREATTIME }}</span
                      >
                    </p>
                  </div>
                </div>
                <div class="equipItem">
                  <div class="title">
                    <img :src="equipImgList[9]" alt="" /><span>流量监测</span>
                  </div>
                  <div class="equiplist">
                    <p>
                      <span class="equiplist_name">设备名称</span
                      ><span class="equiplist_value">实时值(m³/h)</span
                      ><span class="equiplist_time">采集时间</span>
                    </p>
                    <p v-for="(item, index) in paituRegions2" :key="index">
                      <span
                        v-if="item.DEVICENAME == '排土场渗流量'"
                        class="equiplist_name"
                        >{{ item.DEVICENAME }}</span
                      ><span
                        v-if="item.DEVICENAME == '排土场渗流量'"
                        class="equiplist_value"
                        >{{ item.DX }}</span
                      ><span
                        v-if="item.DEVICENAME == '排土场渗流量'"
                        class="equiplist_time"
                        >{{ item.CREATTIME }}</span
                      >
                    </p>
                  </div>
                </div>
              </div>
            </template>
            <template v-if="equipView == '2'">
              <span style="color: #fff; font-size: 18px">{{
                newEquipData.DEVICENAME
              }}</span>
              <div class="equipEchart">
                <v-chart class="chart" :option="equipEchartOption" />
              </div>
              <div
                class="equipEchart"
                v-if="
                  newEquipData.type == 1 ||
                  newEquipData.type == 2 ||
                  newEquipData.type == 3
                "
              >
                <v-chart class="chart" :option="equipEchartOption1" />
              </div>
              <div
                class="equipEchart"
                v-if="
                  newEquipData.type == 1 ||
                  newEquipData.type == 2 ||
                  newEquipData.type == 3
                "
              >
                <v-chart class="chart" :option="equipEchartOption2" />
              </div>
            </template>

            <!-- <div class="equipItem">
              <span>内部位移</span
              ><svg-icon icon-class="neibuweiyi" class="svgIcon" /><em
                >12.0989</em
              ><span class="numTime">12:18:36</span>
            </div>
            <div class="equipItem">
              <span>爆破振动</span
              ><svg-icon icon-class="baopozhendong" class="svgIcon" /><em
                >12.0989</em
              ><span class="numTime">12:18:36</span>
            </div>
            <div class="equipItem">
              <span>降雨量</span
              ><svg-icon icon-class="jiangyuliang" class="svgIcon" /><em
                >12.0989</em
              ><span class="numTime">12:18:36</span>
            </div> -->
          </div>
        </div>
        <div class="mars-dialog__content" v-if="dialogType == '1-6'">
          <ul>
            <li>电子围栏</li>
            <li>指纹门禁</li>
          </ul>
        </div>
        <div class="mars-dialog__content" v-if="dialogType == '1-7'">
          <!-- 排污paiwu -->
          <!-- {{ paiwuData }} -->
          <div class="paiwutitle">{{ paiwuData.createTime }}</div>
          <div class="paiwuContent">
            <div class="paiwuItem">pH值</div>
            <div class="paiwuItem">{{ paiwuData.phValue }}</div>
            <div class="paiwuItem zc">正常</div>

            <div class="paiwuItem">水温</div>
            <div class="paiwuItem">{{ paiwuData.waterTempature }}℃</div>
            <div class="paiwuItem zc">正常</div>

            <div class="paiwuItem">总锰</div>
            <div class="paiwuItem">{{ paiwuData.mengValue }}mg/L</div>
            <div class="paiwuItem zc">正常</div>

            <div class="paiwuItem">总砷</div>
            <div class="paiwuItem">{{ paiwuData.shenValue }}us/L</div>
            <div class="paiwuItem zc">正常</div>

            <div class="paiwuItem">化学需氧量</div>
            <div class="paiwuItem">{{ paiwuData.oilValue }}mg/L</div>
            <div class="paiwuItem zc">正常</div>

            <div class="paiwuItem">累计流量</div>
            <div class="paiwuItem">{{ paiwuData.accumulateData }}m³</div>
            <div class="paiwuItem zc">正常</div>

            <div class="paiwuItem">瞬时流量</div>
            <div class="paiwuItem">{{ paiwuData.instantaneousData }}L/s</div>
            <div class="paiwuItem zc">正常</div>
          </div>
        </div>
        <div class="mars-dialog__content" v-if="dialogType == '1-12'">
          <div class="yjzy-search">
            <input
              v-model="carInputValue"
              placeholder="请输入关键字"
              type="text"
              class="ant-input mars-input input"
            /><button
              @click="carSearch"
              class="ant-btn mars-button button"
              type="button"
            >
              <span class="mars-icon"
                ><svg
                  width="20"
                  height="20"
                  viewBox="0 0 48 48"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z"
                    fill="none"
                    stroke="#e9ffff"
                    stroke-width="4"
                    stroke-linejoin="round"
                  ></path>
                  <path
                    d="M26.657 14.3431C25.2093 12.8954 23.2093 12 21.0001 12C18.791 12 16.791 12.8954 15.3433 14.3431"
                    stroke="#e9ffff"
                    stroke-width="4"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                  <path
                    d="M33.2216 33.2217L41.7069 41.707"
                    stroke="#e9ffff"
                    stroke-width="4"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path></svg
              ></span>
            </button>
          </div>
          <el-tabs v-model="activeName" :stretch="true">
            <el-tab-pane name="1">
               <template #label
                ><span class="my-label" @click="gbCheck(1)"
                  >全部</span
                ></template
              >
              <ul>
                <li
                  v-for="item in allEquip"
                  :key="item.carId"
                  :class="{ active: item.status != 1 }"
                  @click="fly(item)"
                  :style="{ cursor: 'pointer' }"
                >
                  <span v-if="item.type == 4"
                    >{{ item.workType }} {{ item.carName }}</span
                  >
                  <span v-else
                    >{{ equipTypes[item.type] }}{{ item.carName }}</span
                  >
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane name="2">
               <template #label
                ><span class="my-label" @click="gbCheck(2)"
                  >人员</span
                ></template
              >
              <ul>
                <li
                  v-for="item in filteredHumData"
                  :key="item.carId"
                  :class="{ active: item.status != 1 }"
                  @click="fly(item)"
                  :style="{ cursor: 'pointer' }"
                >
                  {{ item.carName }} {{ item.workType }}
                </li>
              </ul>
            </el-tab-pane>
            <el-tab-pane name="3">
               <template #label
                ><span class="my-label" @click="gbCheck(3)"
                  >车辆</span
                ></template
              >
              <ul>
                <li
                  v-for="item in filteredCarData"
                  :key="item.carId"
                  :class="{ active: item.status != 1 }"
                  @click="fly(item)"
                  :style="{ cursor: 'pointer' }"
                >
                  {{ equipTypes[item.type] }}{{ item.carName }}
                </li>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="mars-dialog__content" v-else>
          <div class="yjzy-search">
            <input
              v-model="inputValue"
              placeholder="请输入关键字"
              type="text"
              class="ant-input mars-input input"
            /><button
              @click="search"
              class="ant-btn mars-button button"
              type="button"
            >
              <span class="mars-icon"
                ><svg
                  width="20"
                  height="20"
                  viewBox="0 0 48 48"
                  fill="none"
                  xmlns="http://www.w3.org/2000/svg"
                >
                  <path
                    d="M21 38C30.3888 38 38 30.3888 38 21C38 11.6112 30.3888 4 21 4C11.6112 4 4 11.6112 4 21C4 30.3888 11.6112 38 21 38Z"
                    fill="none"
                    stroke="#e9ffff"
                    stroke-width="4"
                    stroke-linejoin="round"
                  ></path>
                  <path
                    d="M26.657 14.3431C25.2093 12.8954 23.2093 12 21.0001 12C18.791 12 16.791 12.8954 15.3433 14.3431"
                    stroke="#e9ffff"
                    stroke-width="4"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path>
                  <path
                    d="M33.2216 33.2217L41.7069 41.707"
                    stroke="#e9ffff"
                    stroke-width="4"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  ></path></svg
              ></span>
            </button>
          </div>
          <div class="yjzy-content">
            <!-- 视频 -->
            <div class="search-list" v-if="dialogType == '1-2'">
              <div
                class="container1"
                v-for="(item, index) in videoOpenList"
                :key="index"
                @click="videoOpen(item)"
              >
                <div class="container2">
                  <span class="numSpan">{{ index + 1 }}</span>
                  <div class="line1">{{ item.cameraName }}</div>
                  <!-- <div class="line2"></div> -->
                  <!-- <div class="line3">地址:安徽省合肥市高新区科学大道与长江西路交口5F创业园C栋201室</div> -->
                </div>
              </div>
            </div>
            <!-- 广播 -->
            <div class="search-list" v-if="dialogType == '1-9'">
              <div
                class="container1"
                v-for="(item, index) in broadcastOpenList"
                :key="index"
                @click="balanceOpen(item)"
              >
                <div class="container2">
                  <span class="numSpan">{{ index + 1 }}</span>
                  <div class="line1">{{ item.deviceName }}</div>
                </div>
              </div>
            </div>
            <!-- 地磅 -->
            <div class="search-list" v-if="dialogType == '1-10'">
              <div
                class="container1"
                v-for="(item, index) in balanceOpenList"
                :key="index"
                @click="balanceOpen(item)"
              >
                <div class="container2">
                  <span class="numSpan">{{ index + 1 }}</span>
                  <div class="line1">{{ item.deviceName }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 实时监测 -->
      <div class="useFun" :class="showbro1 == true ? 'bro-show' : ''">
        <div class="mars-dialog__header" style="cursor: move">
          <span class="title">实时监测</span>

          <span class="mars-icon close-btn" @click="opType1">
            <svg
              width="18"
              height="18"
              viewBox="0 0 48 48"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M8 8L40 40"
                stroke="currentColor"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path>
              <path
                d="M8 40L40 8"
                stroke="currentColor"
                stroke-width="4"
                stroke-linecap="round"
                stroke-linejoin="round"
              ></path></svg
          ></span>
        </div>
        <div v-if="baseList" class="liselect">
          <div
            v-for="(it, inx) in baseList"
            :key="inx"
            @click.stop="handle(it)"
          >
            <span :style="{ color: it.color }" class="inBox"
              ><svg-icon :icon-class="it.icon" class="svgIcon" />{{
                it.name
              }}</span
            >
          </div>
        </div>
      </div>
      <!-- 底部 -->
    </div>

    <div class="ryan">
      <div class="footer">
        <div class="font_a">
          <p>主办单位:</p>
          &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="span-fo">
            <img class="foot-imga" src="../../assets/s/ddlogo.png" alt="" />
            <a href="#">广东明珠集团矿业有限公司</a>
          </span>
        </div>

        <div class="font_a">
          <p>制作维护:</p>
          &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span class="span-fb"
            ><img
              class="foot-imgb"
              src="../../assets/s/ryanlogo.png"
              alt=""
            /><a href=" http://www.ryansystem.com"
              >深圳市莱安达科技有限公司</a
            ></span
          >
          <span
            >备案号：<a href="https://beian.miit.gov.cn"
              >粤ICP备19123273号-3</a
            ></span
          >
        </div>
        <div class="font_a">
          <span class="span-fo"> 阿里云服务器提供支持</span>
        </div>
      </div>

      <div
        @click="alarmClick(0)"
        class="alarm"
        style="position: absolute; right: 30px; cursor: pointer"
      >
        <img src="@/assets/s/bj1.png" alt="" />
      </div>
    </div>
    <el-dialog title="设备报警信息" :visible.sync="alarmShow" width="30%">
      <div style="height: 60vh; overflow-y: scroll">
        <div class="alarmLists alarmLists2">
          <p><span>设备</span><span>报警信息</span><span>报警时间</span></p>
        </div>
        <div v-if="alarmList.length == 0" style="text-align: center">
          <span>当日暂无报警信息</span>
          <el-button type="text" @click="alarmClick(1)">历史信息</el-button>
        </div>
        <template v-else>
          <div
            v-for="(item, index) in alarmList"
            :key="index"
            class="alarmLists"
          >
            <p>
              <span>{{ item.DEVICENAME }}</span
              ><span>{{ item.MESSAGE }}</span
              ><span>{{ item.CREATE_TIME }}</span>
            </p>
          </div>
        </template>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="alarmShow = false">取 消</el-button>
        <el-button type="primary" @click="alarmShow = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      custom-class="el_dialog_ryan"
      :title="cameraName"
      :visible.sync="dialogVisible"
      :width="width + 'px'"
      :height="height + 'px'"
      :before-close="handleClose"
    >
      <VideoPlay
        v-if="videoS"
        :videoWidth="width - 50"
        :videoHeight="height"
        :cameraCode="cameraIndexCode"
        :isdestroy="isdestroy"
      />
    </el-dialog>
    <el-dialog
      :title="equipTitle"
      :visible.sync="infoShow"
      width="1500px"
      height="500px"
    >
      <div style="display: flex; justify-content: space-between">
        <div class="equipMapList">
          <span>设备信息</span>
          <p><span>设备名</span><span>实时值</span><span>返回时间</span></p>
          <template v-if="dialogType == '1-3'">
            <div class="equiBox">
              <p v-for="(item, index) in caikuangRegions2" :key="index">
                <span>{{ item.DEVICENAME }}</span
                ><span>{{ item.DX }}</span
                ><span>{{ item.CREATTIME }}</span>
              </p>
            </div>
          </template>
          <template v-if="dialogType == '1-4'">
            <div class="equiBox">
              <p v-for="(item, index) in weikuangRegions2" :key="index">
                <span>{{ item.DEVICENAME }}</span
                ><span>{{ item.DX }}</span
                ><span>{{ item.CREATTIME }}</span>
              </p>
            </div>
          </template>
          <template v-if="dialogType == '1-5'">
            <div class="equiBox">
              <p v-for="(item, index) in paituRegions2" :key="index">
                <span>{{ item.DEVICENAME }}</span
                ><span>{{ item.DX }}</span
                ><span>{{ item.CREATTIME }}</span>
              </p>
            </div>
          </template>
        </div>
        <div class="equipMapList">
          <span>人员信息</span>
          <p><span>姓名</span><span>工种</span><span>状态</span></p>
          <template v-if="dialogType == '1-3'">
            <p v-for="(item, index) in CKlist" :key="index">
              <span>{{ item.options.attr.姓名 }}</span
              ><span>{{ item.options.attr.工种 }}</span
              ><span>{{ item.options.attr.状态 }}</span>
            </p>
          </template>
          <template v-if="dialogType == '1-4'">
            <p v-for="(item, index) in WKlist" :key="index">
              <span>{{ item.options.attr.姓名 }}</span
              ><span>{{ item.options.attr.工种 }}</span
              ><span>{{ item.options.attr.状态 }}</span>
            </p>
          </template>
          <template v-if="dialogType == '1-5'">
            <p v-for="(item, index) in PTlist" :key="index">
              <span>{{ item.options.attr.姓名 }}</span
              ><span>{{ item.options.attr.工种 }}</span
              ><span>{{ item.options.attr.状态 }}</span>
            </p>
          </template>
        </div>
        <div class="equipMapList">
          <span>车辆信息</span>
          <p><span>车牌号</span><span>车辆类型</span><span>状态</span></p>
          <template v-if="dialogType == '1-3'">
            <p v-for="(item, index) in CKlist" :key="index">
              <span>{{ item.options.attr.车牌号 }}</span
              ><span>{{ item.options.attr.车辆类型 }}</span
              ><span>{{ item.options.attr.状态 }}</span>
            </p>
          </template>
          <template v-if="dialogType == '1-4'">
            <p v-for="(item, index) in WKlist" :key="index">
              <span>{{ item.options.attr.车牌号 }}</span
              ><span>{{ item.options.attr.车辆类型 }}</span
              ><span>{{ item.options.attr.状态 }}</span>
            </p>
          </template>
          <template v-if="dialogType == '1-5'">
            <p v-for="(item, index) in PTlist" :key="index">
              <span>{{ item.options.attr.车牌号 }}</span
              ><span>{{ item.options.attr.车辆类型 }}</span
              ><span>{{ item.options.attr.状态 }}</span>
            </p>
          </template>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import MarsMap from "@/components/mars-work/mars-map.vue";
import * as mars3d from "mars3d";

import {
  getweathernow,
  getwarning,
  opencastbindGetList,
  surfdeviceGetLis,
  surfdeviceGetAll,
  surfdeviceGetAll2,
  surfdevicedataGet,
  inmvdevicedataGet,
  boomdeviceeventGet,
  phrldevicedataGet,
  leveldevicedataGet,
  beachdevicedataGet,
  flowdevicedataGet,
  raindevicedataGet,
  pollutionGet,
  alarmlogGetList,
  getonlinelist,
  ionanalysisGet,
} from "@/api/city";
import {
  hikvisionCamerasList,
  getCameraPreviewURL,
  geometryList,
  listDevice,
} from "@/api/system/video";
import { listPollutantDevice } from "@/api/app/PollutantDevice";
import { listEquipDevice } from "@/api/system/broadcast";
import moment from "moment";
import { mineinfo } from "@/api/system/introduce";
import { getYearMateTime, toChinesNum } from "@/utils/time";
import { bd09towgs84 } from "@/utils/bub";
import { log } from "../../components/XDVideo";

const eventTarget = new mars3d.BaseClass();
const Cesium = mars3d.Cesium;
let tiles3dLayer1;
let tiles3dLayer2;
let tiles3dLayer3;
let map;
let graphiBoundaryLayer = new mars3d.layer.GraphicLayer();

export default {
  name: "Index",

  components: {
    MarsMap,
  },

  data() {
    const basePathUrl = window.basePathUrl || "";
    return {
      CKlist: [],
      WKlist: [],
      PTlist: [],
      yieldData: "2021-01-19",
      imgArr: [
        {
          id: 0,
          name: 1,
        },
        {
          id: 1,
          name: 2,
        },
        {
          id: 2,
          name: 3,
        },
      ],
      infoShow: false,
      currentIndex: 0, //当前所在图片下标
      timer: null, //定时轮询
      HeaderOnlineHum: null,
      // 区域设备
      alarmList: [],
      alarmShow: false,
      equipColor: "",
      equipLi: false,
      equipLi2: false,
      equipColorType: {
        1: "#5a8cec",
        2: "#3cd4e5",
        3: "#dd9b0f",
        降雨量: "#49d177",
      },
      paiwuData: {},
      equipEchartOption: {
        title: {
          text: "北向位移量(mm)",
          textStyle: {
            color: "#fff", // 设置标题文字颜色
          },
        },
        tooltip: {
          trigger: "axis",
          z: 999999999,
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          z: 999999999,
        },
        xAxis: {
          type: "category",
          name: "时间",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#fff", // 设置 x 轴标签文字颜色
            },
          },
          data: [
            "2021-12-20 00:00:00",
            "2021-12-20 06:00:00",
            "2021-12-20 12:00:00",
            "2021-12-20 18:00:00",
            "2021-12-21 00:00:00",
            "2021-12-21 06:00:00",
            "2021-12-21 12:00:00",
            "2021-12-21 18:00:00",
            "2021-12-22 00:00:00",
          ],
        },
        yAxis: {
          type: "value",
          name: "mm",
          axisLabel: {
            textStyle: {
              color: "#fff", // 设置 x 轴标签文字颜色
            },
          },
        },
        series: [
          {
            name: "北向偏移量(mm)",
            color: "#49a3ff",
            type: "line",
            // stack: 'Total',
            data: [],
            smooth: true,
          },
        ],
      },
      equipEchartOption1: {
        title: {
          text: "东向位移量(mm)",
          textStyle: {
            color: "#fff", // 设置标题文字颜色
          },
        },
        tooltip: {
          trigger: "axis",
          z: 999999999,
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          z: 999999999,
        },
        xAxis: {
          type: "category",
          name: "时间",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#fff", // 设置 x 轴标签文字颜色
            },
          },
          data: [
            "2021-12-20 00:00:00",
            "2021-12-20 06:00:00",
            "2021-12-20 12:00:00",
            "2021-12-20 18:00:00",
            "2021-12-21 00:00:00",
            "2021-12-21 06:00:00",
            "2021-12-21 12:00:00",
            "2021-12-21 18:00:00",
            "2021-12-22 00:00:00",
          ],
        },
        yAxis: {
          type: "value",
          name: "mm",
          axisLabel: {
            textStyle: {
              color: "#fff", // 设置 x 轴标签文字颜色
            },
          },
        },
        series: [
          {
            name: "东向偏移量(mm)",
            color: "#5de0cb",
            type: "line",
            // stack: 'Total',
            data: [],
            smooth: true,
          },
        ],
      },
      equipEchartOption2: {
        title: {
          text: "水平位移量(mm)",
          textStyle: {
            color: "#fff", // 设置标题文字颜色
          },
        },
        tooltip: {
          trigger: "axis",
          z: 999999999,
        },
        grid: {
          left: "2%",
          right: "2%",
          bottom: "2%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          z: 999999999,
        },
        xAxis: {
          type: "category",
          name: "时间",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#fff", // 设置 x 轴标签文字颜色
            },
          },
          data: [],
        },
        yAxis: {
          type: "value",
          name: "mm",
          axisLabel: {
            textStyle: {
              color: "#fff", // 设置 x 轴标签文字颜色
            },
          },
        },
        series: [
          {
            name: "水平偏移量(mm)",
            color: "#e84648",
            type: "line",
            // stack: 'Total',
            data: [],
            smooth: true,
          },
        ],
      },
      newEquipData: [],
      equipView: "1",
      equipImgList: {
        0: require("../../assets/s/leida.png"),
        1: require("../../assets/s/biaomianweiyi.png"),
        2: require("../../assets/s/neibuweiyi.png"),
        3: require("../../assets/s/baopozhendong.png"),
        4: require("../../assets/s/jiangyuliang.png"),
        8: require("../../assets/s/jinrunxian.png"),
        6: require("../../assets/s/gantan.png"),
        7: require("../../assets/s/shenya.png"),
        5: require("../../assets/s/kushuiwei.png"),
        9: require("../../assets/s/liuliang.png"),
      },
      caikuangRegions: [],
      weikuangRegions: [],
      paituRegions: [],
      caikuangRegions2: [],
      weikuangRegions2: [],
      paituRegions2: [],

      carColor: {
        1: "#FF0000",
        2: "#EE1289",
        3: "#C0FF3E",
        5: "#54FF9F",
        6: "#BF3EFF",
        7: "#FFFFF0",
        8: "#FF69B4",
        9: "#FFFFF0",
      }, //车辆字体颜色枚举
      unchangedData: [],
      previousData: [],
      equipTypes: {
        1: "挖掘机",
        2: "山皮运输车",
        3: "铲车",
        4: "",
        5: "采场运输车",
        6: "沉泥运输车",
        7: "炮机",
        8: "钻机",
        9: "外来车辆",
      },
      activeName: "1",
      i: 0,
      allEquip: [],
      onlineCar: [],
      onlineHum: [],
      home: {
        type: "FeatureCollection",
        features: [],
      },
      width: 900,
      height: 500,
      menuOption: 1,
      cameraIndexCode: null,
      videoS: false,
      videoShow: false,
      dialogVisible: false,
      isdestroy: false,
      showbro1: true,
      showbro2: true,
      leftShow: true,
      imgVideo: require("@/assets/s/video1.png"),
      imgVideo2: require("@/assets/s/videoerr.png"),
      imgBalance: require("@/assets/s/balance.gif"),
      imgPaiwu: require("@/assets/s/paiwu.png"),
      imgShuiBeng: require("@/assets/s/shuibeng.png"),
      imgBbroad:
        "http://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/yingjiguanbo.png",
      imgPNG: require("@/assets/s/video.png"),
      imgPNG2: require("@/assets/s/videoerr.png"),

      option1: {
        textStyle: {
          color: "#ffffff",
          fontSize: "20",
          // 全局文字颜色为灰色
        },
        grid: {
          top: "0",
        },
        // legend: {
        //   top: 'bottom'
        // },
        // toolbox: {
        //   show: true,
        //   feature: {
        //     mark: { show: true },
        //     dataView: { show: true, readOnly: false },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        label: { color: "#fff" },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [60, 90],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 0,
              borderWidth: 4,
              // opacity: 0.7,
            },
            data: [
              {
                value: 200,
                name: "人员超时",
                itemStyle: {
                  normal: { color: "#f66a6f", borderColor: "#fff" },
                },
              },
              {
                value: 200,
                name: "边坡",
                itemStyle: {
                  normal: { color: "#ffe800", borderColor: "#fff" },
                },
              },
              {
                value: 200,
                name: "排土场",
                itemStyle: {
                  normal: { color: "#76e4d6", borderColor: "#fff" },
                },
              },
              {
                value: 200,
                name: "尾矿库",
                itemStyle: {
                  normal: { color: "#b5c334", borderColor: "#b5c334" },
                },
              },
              {
                value: 200,
                name: "其它预警",
                itemStyle: {
                  normal: { color: "#b43f45", borderColor: "#fb4c4c" },
                },
              },
            ],
          },
        ],
      },
      option2: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
          ],
          axisLine: {
            // 设置Y轴线条
            show: true, // 显示Y轴线条
            lineStyle: {
              color: "#092f5d", // 设置Y轴线条颜色
              width: 2, // 设置Y轴线条宽度
              type: "solid", // 设置Y轴线条类型，支持solid、dashed、dotted等
            },
          },
          axisLabel: {
            // 设置X轴标签
            show: true, // 显示X轴标签
            textStyle: {
              color: "#fff", // 设置X轴标签颜色
            },
          },
        },
        yAxis: {
          type: "value",
          //name: "单位：mm",
          nameTextStyle: {
            color: "#fff",
          },
          axisLine: {
            // 设置Y轴线条
            show: true, // 显示Y轴线条
            lineStyle: {
              color: "#092f5d", // 设置Y轴线条颜色
              width: 2, // 设置Y轴线条宽度
              type: "solid", // 设置Y轴线条类型，支持solid、dashed、dotted等
            },
          },
          axisLabel: {
            // 设置X轴标签
            show: true, // 显示X轴标签
            textStyle: {
              color: "#fff", // 设置X轴标签颜色
            },
          },
          splitLine: {
            // 设置X轴网格线
            show: true, // 显示X轴网格线
            lineStyle: {
              color: "#fff", // 设置X轴网格线颜色
              type: "solid", // 设置X轴网格线类型，支持solid、dashed、dotted等
              width: 1,
              show: false,
            },
          },
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "2%",
          top: "10%",
          containLabel: true,
        },
        series: [
          {
            name: "北向偏移量(mm)",
            color: ["#40c7e4"],
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
            ],
          },
          {
            name: "东向偏移量(mm)",
            color: ["#ea6013"],
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
            ],
          },
          {
            name: "水平偏移量(mm)",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
            ],
          },
        ],
      },
      option3: {
        xAxis: {
          type: "category",
          data: ["A", "B", "C", "D", "E", "F"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            data: [20, 40, 60, 80, 100, 120],
            itemStyle: {},
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      },
      option4: {
        title: {
          text: "采剥",
          textStyle: {
            color: "#fff", // 标题颜色
          },
          x: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },

        grid: {
          top: "20%",
          left: "3%",
          right: "4%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: ["采剥", "采矿", "回收矿"],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              // 设置Y轴线条
              show: true, // 显示Y轴线条
              lineStyle: {
                color: "#092f5d", // 设置Y轴线条颜色
                width: 1, // 设置Y轴线条宽度
                type: "solid", // 设置Y轴线条类型，支持solid、dashed、dotted等
              },
            },
            axisLabel: {
              // 设置X轴标签
              interval: "auto",
              show: true, // 显示X轴标签
              textStyle: {
                color: "#fff", // 设置X轴标签颜色
                fontSize: "12",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：吨",
            min: "0",
            max: "6000",
            nameTextStyle: {
              color: "#fff", // 这里将单位的字体颜色设置为红色
            },
            axisLine: {
              // 设置Y轴线条
              show: true, // 显示Y轴线条
              lineStyle: {
                color: "#092f5d", // 设置Y轴线条颜色
                width: 1, // 设置Y轴线条宽度
                type: "solid", // 设置Y轴线条类型，支持solid、dashed、dotted等
              },
            },
            splitLine: {
              // 设置X轴网格线
              show: true, // 显示X轴网格线
              lineStyle: {
                color: "#092f5d", // 设置X轴网格线颜色
                type: "solid", // 设置X轴网格线类型，支持solid、dashed、dotted等
                width: 1,
              },
            },
            axisLabel: {
              // 设置X轴标签
              show: true, // 显示X轴标签
              textStyle: {
                color: "#fff", // 设置X轴标签颜色
              },
            },
          },
        ],
        series: [
          {
            shadowColor: "rgba(0, 0, 0, 0.5)",
            name: "产量/吨",
            type: "bar",
            barWidth: "30%",
            data: [0, 0, 0],
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "#e84648",
                    "#dde359",
                    "#49a3ff",
                    "#5de0cb",
                    "#e84648",
                    "#dde359",
                    "#49a3ff",
                    "#5de0cb",
                  ];
                  return colorList[params.dataIndex];
                },
                barBorderRadius: [10, 10, 0, 0],
              }, //  设置圆角半径，顺序是左上、右上、右下、左下
            },
          },
        ],
      },
      option5: {
        title: {
          text: "选矿",
          textStyle: {
            color: "#fff", // 标题颜色
          },
          x: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },

        grid: {
          top: "20%",
          left: "1%",
          right: "4%",
          bottom: "8%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "废石",
              "05石粉",
              "石子回炉料",
              "回收矿",
              "压榨泥",
              "成品砂",
              "矿石",
              "废石料",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              // 设置Y轴线条
              show: true, // 显示Y轴线条
              lineStyle: {
                color: "#092f5d", // 设置Y轴线条颜色
                width: 1, // 设置Y轴线条宽度
                type: "solid", // 设置Y轴线条类型，支持solid、dashed、dotted等
              },
            },
            axisLabel: {
              // 设置X轴标签
              interval: "auto",
              show: true, // 显示X轴标签
              textStyle: {
                color: "#fff", // 设置X轴标签颜色
                fontSize: "12",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "单位：吨",
            min: "0",
            max: "6000",
            interval: 600,
            nameTextStyle: {
              color: "#fff", // 这里将单位的字体颜色设置为红色
            },
            axisLine: {
              // 设置Y轴线条
              show: true, // 显示Y轴线条
              lineStyle: {
                color: "#092f5d", // 设置Y轴线条颜色
                width: 1, // 设置Y轴线条宽度
                type: "solid", // 设置Y轴线条类型，支持solid、dashed、dotted等
              },
            },
            splitLine: {
              // 设置X轴网格线
              show: true, // 显示X轴网格线
              lineStyle: {
                color: "#092f5d", // 设置X轴网格线颜色
                type: "solid", // 设置X轴网格线类型，支持solid、dashed、dotted等
                width: 1,
              },
            },
            axisLabel: {
              // 设置X轴标签
              show: true, // 显示X轴标签
              textStyle: {
                color: "#fff", // 设置X轴标签颜色
              },
            },
          },
        ],
        series: [
          {
            shadowColor: "rgba(0, 0, 0, 0.5)",
            name: "产量/吨",
            type: "bar",
            barWidth: "30%",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0],
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    "#e84648",
                    "#dde359",
                    "#49a3ff",
                    "#5de0cb",
                    "#e84648",
                    "#dde359",
                    "#49a3ff",
                    "#5de0cb",
                  ];
                  return colorList[params.dataIndex];
                },
                barBorderRadius: [10, 10, 0, 0],
              }, //  设置圆角半径，顺序是左上、右上、右下、左下
            },
          },
        ],
      },

      option6: {
        title: {
          text: "选矿",
          textStyle: {
            color: "#fff", // 标题颜色
          },
          x: "center",
        },
        grid: {
          left: "1%",
          right: "2%",
          bottom: "2%",
          top: "8%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value + "吨";
          },
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            name: "单位：吨",

            nameTextStyle: {
              color: "#fff", // 这里将单位的字体颜色设置为红色
            },
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: [
              "机烧精粉(干重)(品位：23.23%)",
              "1#粉(干重)(品位：23.00%)",
              "05粒径（5-10mm）",
              "12粒径（10-20mm）",
              "13粒径（20-31.5mm）",
              "水洗12石",
              "水洗13石",
              "尾矿机制砂石",
            ],
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "12",
              },
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0],
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: "rgb(57,89,255,1)",
              },
            },
            barWidth: 20,
            data: [0, 0, 0, 0, 0, 0, 0, 0],
          },
        ],
      },
      option7: {
        title: {
          text: "选矿",
          textStyle: {
            color: "#fff", // 标题颜色
          },
          x: "center",
        },
        grid: {
          left: "1%",
          right: "2%",
          bottom: "2%",
          top: "8%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + " : " + params[0].value + "吨";
          },
        },
        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            name: "单位：吨",
            nameTextStyle: {
              color: "#fff", // 这里将单位的字体颜色设置为红色
            },
            inverse: true,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: [
              "机烧精粉(干重)(品位：23.23%)",
              "1#粉(干重)(品位：23.00%)",
              "05粒径（5-10mm）",
              "12粒径（10-20mm）",
              "13粒径（20-31.5mm）",
              "水洗12石",
              "水洗13石",
              "尾矿机制砂石",
            ],
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#ffffff",
                fontSize: "12",
              },
            },
            data: [0, 0, 0, 0, 0, 0, 0, 0],
          },
        ],
        series: [
          {
            name: "值",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: 30,
                color: "rgb(57,89,255,1)",
              },
            },
            barWidth: 20,
            data: [0, 0, 0, 0, 0, 0, 0, 0],
          },
        ],
      },
      option9: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          textStyle: {
            color: "#fff", // 设置X轴标签颜色
            fontSize: "12",
          },
          data: ["北向偏移量(mm)", "东向偏移量(mm)", "水平偏移量(mm)"],
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              // 设置X轴标签
              interval: "auto",
              show: true, // 显示X轴标签
              textStyle: {
                color: "#fff", // 设置X轴标签颜色
                fontSize: "12",
              },
            },
            data: [
              "00:00",
              "03:00",
              "05:00",
              "07:00",
              "09:00",
              "11:00",
              "13:00",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
            //name: "单位：mm",
            nameTextStyle: {
              color: "#fff", // 这里将单位的字体颜色设置为红色
            },
            axisLabel: {
              // 设置X轴标签
              interval: "auto",
              show: true, // 显示X轴标签
              textStyle: {
                color: "#fff", // 设置X轴标签颜色
                fontSize: "12",
              },
            },
          },
        ],
        series: [
          {
            name: "北向偏移量(mm)",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: ["0", "0", "0", "0", "0", "0", "0"],
          },
          {
            name: "东向偏移量(mm)",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: ["0", "0", "0", "0", "0", "0", "0"],
          },
          {
            name: "水平偏移量(mm)",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: ["0", "0", "0", "0", "0", "0", "0"],
          },
        ],
      },
      echartOption1: {
        color: ["#40c7e4"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
          ],
          axisLine: {
            // 设置Y轴线条
            show: true, // 显示Y轴线条
            lineStyle: {
              color: "#092f5d", // 设置Y轴线条颜色
              width: 2, // 设置Y轴线条宽度
              type: "solid", // 设置Y轴线条类型，支持solid、dashed、dotted等
            },
          },
          axisLabel: {
            // 设置X轴标签
            show: true, // 显示X轴标签
            textStyle: {
              color: "#fff", // 设置X轴标签颜色
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            // 设置Y轴线条
            show: true, // 显示Y轴线条
            lineStyle: {
              color: "#092f5d", // 设置Y轴线条颜色
              width: 2, // 设置Y轴线条宽度
              type: "solid", // 设置Y轴线条类型，支持solid、dashed、dotted等
            },
          },
          axisLabel: {
            // 设置X轴标签
            show: true, // 显示X轴标签
            textStyle: {
              color: "#fff", // 设置X轴标签颜色
            },
          },
          splitLine: {
            // 设置X轴网格线
            show: false, // 显示X轴网格线
            lineStyle: {
              color: "#092f5d", // 设置X轴网格线颜色
              type: "solid", // 设置X轴网格线类型，支持solid、dashed、dotted等
              width: 2,
            },
          },
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "15%",
          top: "2%",
          containLabel: true,
        },
        legend: {
          data: [
            { name: "地下水位", textStyle: { height: 20, color: "#fff" } },
            { name: "地下水位2", textStyle: { height: 20, color: "#fff" } },
            { name: "地下水位3", textStyle: { height: 20, color: "#fff" } },
            { name: "地下水位4", textStyle: { height: 20, color: "#fff" } },
          ], // 添加图例，说明不同颜色的线代表什么数据
          top: "bottom", // 将图例放置在底部
          orient: "horizontal", // 设置图例水平显示
          itemWidth: 20,
          margin: 0,
        },
        tooltip: {
          trigger: "axis", // 设置触发方式为轴
        },
        series: [
          {
            name: "地下水位",
            type: "line",
            data: [12, 2, 5, 4, 10, 8, 2, 7, 2, 1, 9, 0, 12],
            itemStyle: {
              color: "#00FF7F", // 设置第一条折线的颜色
            },
            emphasis: {
              focus: "series",
              label: {
                show: true, // 显示拐点上的信息
              },
            },
          },
          {
            name: "地下水位2",
            type: "line",
            data: [1, 4, 5, 6, 2, 9, 2, 1, 0, 9, 7, 6, 6],
            itemStyle: {
              color: "#436EEE", // 设置第一条折线的颜色
            },
            emphasis: {
              focus: "series",
              label: {
                show: true, // 显示拐点上的信息
              },
            },
          },
          {
            name: "地下水位3",
            type: "line",
            data: [4, 4, 3, 2, 8, 10, 2, 1, 3, 4, 5, 7, 9],
            itemStyle: {
              color: "#CD2626", // 设置第一条折线的颜色
            },
            emphasis: {
              focus: "series",
              label: {
                show: true, // 显示拐点上的信息
              },
            },
          },
          {
            name: "地下水位4",
            type: "line",
            data: [8, 2, 2, 1, 6, 5, 8, 7, 6, 4, 2, 0, 2],
            itemStyle: {
              color: "#EEEE00", // 设置第一条折线的颜色
            },
            emphasis: {
              focus: "series",
              label: {
                show: true, // 显示拐点上的信息
              },
            },
          },
        ],
      },
      echartOption2: {
        color: ["#40c7e4"],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "00:00",
            "01:00",
            "02:00",
            "03:00",
            "04:00",
            "05:00",
            "06:00",
            "07:00",
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
          ],
          axisLine: {
            // 设置Y轴线条
            show: true, // 显示Y轴线条
            lineStyle: {
              color: "#092f5d", // 设置Y轴线条颜色
              width: 2, // 设置Y轴线条宽度
              type: "solid", // 设置Y轴线条类型，支持solid、dashed、dotted等
            },
          },
          axisLabel: {
            // 设置X轴标签
            show: true, // 显示X轴标签
            textStyle: {
              color: "#fff", // 设置X轴标签颜色
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            // 设置Y轴线条
            show: true, // 显示Y轴线条
            lineStyle: {
              color: "#092f5d", // 设置Y轴线条颜色
              width: 2, // 设置Y轴线条宽度
              type: "solid", // 设置Y轴线条类型，支持solid、dashed、dotted等
            },
          },
          axisLabel: {
            // 设置X轴标签
            show: true, // 显示X轴标签
            textStyle: {
              color: "#fff", // 设置X轴标签颜色
            },
          },
          splitLine: {
            // 设置X轴网格线
            show: false, // 显示X轴网格线
            lineStyle: {
              color: "#092f5d", // 设置X轴网格线颜色
              type: "solid", // 设置X轴网格线类型，支持solid、dashed、dotted等
              width: 2,
            },
          },
        },
        grid: {
          left: "0",
          right: "0",
          bottom: "15%",
          top: "5%",
          containLabel: true,
        },
        legend: {
          data: [
            { name: "表面位移", textStyle: { height: 20, color: "#fff" } },
            { name: "内部位移", textStyle: { height: 20, color: "#fff" } },
            { name: "地下水位", textStyle: { height: 20, color: "#fff" } },
            { name: "库水位", textStyle: { height: 20, color: "#fff" } },
            { name: "降雨量", textStyle: { height: 20, color: "#fff" } },
          ], // 添加图例，说明不同颜色的线代表什么数据
          top: "bottom", // 将图例放置在底部
          orient: "horizontal", // 设置图例水平显示
          itemWidth: 20,
          margin: 0,
        },
        tooltip: {
          trigger: "axis", // 设置触发方式为轴
        },
        series: [
          {
            name: "表面位移",
            type: "line",
            data: [3, 7, 5, 9, 10, 6, 4, 8, 2, 1, 11, 12],
            itemStyle: {
              color: "#00FF7F", // 设置第一条折线的颜色
            },
            emphasis: {
              focus: "series",
              label: {
                show: true, // 显示拐点上的信息
              },
            },
          },
          {
            name: "内部位移",
            type: "line",
            data: [5, 10, 11, 6, 8, 9, 7, 1, 3, 4, 2, 12],
            itemStyle: {
              color: "#436EEE", // 设置第一条折线的颜色
            },
            emphasis: {
              focus: "series",
              label: {
                show: true, // 显示拐点上的信息
              },
            },
          },
          {
            name: "地下水位",
            type: "line",
            data: [6, 3, 9, 2, 10, 1, 4, 11, 8, 12, 7, 5],
            itemStyle: {
              color: "#CD2626", // 设置第一条折线的颜色
            },
            emphasis: {
              focus: "series",
              label: {
                show: true, // 显示拐点上的信息
              },
            },
          },
          {
            name: "库水位",
            type: "line",
            data: [8, 9, 1, 11, 3, 5, 2, 12, 7, 4, 10, 6],
            itemStyle: {
              color: "#EEEE00", // 设置第一条折线的颜色
            },
            emphasis: {
              focus: "series",
              label: {
                show: true, // 显示拐点上的信息
              },
            },
          },
          {
            name: "地下水位",
            type: "line",
            data: [7, 6, 10, 4, 11, 2, 8, 12, 5, 1, 9, 3],
            itemStyle: {
              color: "#FF00FF", // 设置第一条折线的颜色
            },
            emphasis: {
              focus: "series",
              label: {
                show: true, // 显示拐点上的信息
              },
            },
          },
        ],
      },
      configUrl: basePathUrl + "config/config.json",
      formState: {
        // txtModel: "http://120.78.74.192/dt/tileset.json",
        txtModel: "https://mz-dading.com/dt/tileset.json",
        chkProxy: false,
        txtX: 0,
        txtY: 0,
        txtZ: 0,
        depthTestAgainstTerrain: false,
        rotationZ: 0.0,
        rotationX: 0.0,
        rotationY: 0.0,
        scale: 1,
        axis: "",
        maximumScreenSpaceError: 8,
        opacity: 1,
        highlightEnable: false,
        popupEnable: true,
        transform: true,
      },
      map: null,
      markerList: [],
      x: "",
      y: "",
      websock: null,
      graphicLayer: null,
      alt: 0,
      wkkList: [],
      graphiBoundaryLayer: null,
      city: null,
      cityClass: null,
      moveFlag: false,
      cityList: [
        // {
        //   icon:'warnRed',
        //   text:"上海中心气象台发布大风蓝色预警[Ⅳ级/一般]"
        // },
        // {
        //   icon:'warnYellow',
        //   text:"上海中心气象色预警[Ⅳ级/一般]"
        // },
        // {
        //   icon:'warnGreen',
        //   text:"上蓝色预警[Ⅳ级/一般]"
        // },
      ],

      vehicleList: [],
      warnShow: false,
      warning: [],
      activeId: 0,
      week: null,
      year: null,
      time: null,
      setINTime: null,
      funList: [
        {
          name: "实时监测",
          id: 1,
          children: [
            {
              name: "区域划分",
              icon: "quyuhuafen",
              id: "1-1",
              color: "#ffe800",
            },
            {
              name: "智能卡调",
              icon: "dingweiwang_icon",
              id: "1-12",
              color: "#ffe800",
            },
            {
              name: "采矿场",
              icon: "caikuangchang",
              id: "1-3",
              color: "#ffe800",
            },
            { name: "尾矿库", icon: "weikuangku", id: "1-4", color: "#ffe800" },
            { name: "排土场", icon: "paituchang", id: "1-5", color: "#ffe800" },
            {
              name: "炸药库",
              icon: "baopozhengdong_icon",
              id: "1-6",
              color: "#ffe800",
            },
            {
              name: "视频监控",
              icon: "shipingjiankong",
              id: "1-2",
              color: "#ffe800",
            },
            { name: "智能排污", icon: "paiwu", id: "1-7", color: "#ffe800" },
            {
              name: "智能排水",
              icon: "zhinengpaishui",
              id: "1-8",
              color: "#ffe800",
            },
            {
              name: "应急广播",
              icon: "yingjiguangbo_icon",
              id: "1-9",
              color: "#ffe800",
            },
            {
              name: "电子地磅",
              icon: "dianzidibang_icon",
              id: "1-10",
              color: "#ffe800",
            },
            { name: "绿色智能", icon: "zrzr", id: "1-11", color: "#26ddff" },
          ],
        },
        { name: "功能菜单", id: 3 },
      ],
      baseList: [],
      videoOpenList: [], // 视频列表
      balanceOpenList: [], // 地磅列表
      broadcastOpenList: [], //广播
      dialogType: "", //显示哪种设备
      equipTitle: "", //设备列表标题
      balances: [],
      valueList: [],
      mineBorder: null,
      inputValue: null,
      carInputValue: "",
      websoketURL: "wss://dading-mine.com/wss/",
      videohls: "",
      myPlayerHls: null,
      cameraName: null,

      ports: {
        1: surfdevicedataGet, //表面位移
        2: inmvdevicedataGet, //内部位移
        3: boomdeviceeventGet, //爆破振动
        4: phrldevicedataGet, //降雨量
        5: leveldevicedataGet, //库水位
        6: beachdevicedataGet,
        7: flowdevicedataGet,
        8: raindevicedataGet,
      },
    };
  },
  destroyed() {
    if (this.setINTime) {
      clearInterval(this.setINTime);
    }
  },
  watch: {
    inputValue: {
      handler(newValue) {
        if (newValue.trim() === "") {
          this.videoOpenList = this.valueList;
        }
      },
    },
  },
  computed: {
    filteredHumData() {
      return this.onlineHum.filter((item) =>
        item.carName.includes(this.carInputValue)
      );
    },
    filteredCarData() {
      return this.onlineCar.filter((item) =>
        item.carName.includes(this.carInputValue)
      );
    },
  },
  mounted() {
    console.log(this.todyData);
    // 获取产量数据
    this.getyieldData();

    let _this = this;
    this.setINTime = setInterval(() => {
      let data = new Date().valueOf();
      _this.year = getYearMateTime(data).split(" ")[0];
      _this.time = getYearMateTime(data).split(" ")[1];
    }, 1000);

    this.homeEchart({ ID: 260, type: 1 }, 1);

    this.homeEchart({ ID: 1642858012, type: 1 }, 2);
  },
  created() {
    this.yieldData = this.getToday();
    getonlinelist().then((res) => {
      this.HeaderOnlineHum = res.total;
    });
    this.initWebSocket(this.websoketURL);

    this.week = `星期${toChinesNum(moment().format("E"))}`;

    getweathernow().then((res) => {
      this.city = { ...res.data.now };
      this.cityClass = `qi-${this.city.icon}-fill`;
    });
    getwarning().then((res) => {
      this.warning = res.data.warning.map((item) => {
        return item.text;
      });

      if (res.data.warning != "") {
        this.cityList = res.data.warning.map((item) => {
          switch (item.severityColor) {
            case "Red":
              return {
                icon: "warnRed",
                text: item.title,
              };
              break;
            case "Yellow":
              return {
                icon: "warnYellow",
                text: item.title,
              };
              break;
            case "Blue":
              return {
                icon: "warnBlue",
                text: item.title,
              };
              break;

            default:
              break;
          }
        });
      }
    });

    this.getAllEqData();
  },
  beforeDestroy() {
    this.websocketclose();
  },
  methods: {
    getyieldData() {
      ionanalysisGet({ timeDate: this.yieldData }).then((res) => {
        console.log(res);
        if (res.data[0].x.length == 0) {
          this.option4.title.text = res.data[0].name;
          this.option4.xAxis[0].data = ["采剥离", "采矿", "回收矿"];
          this.option4.series[0].data = [0, 0, 0];
        } else {
          this.option4.title.text = res.data[0].name + res.data[0].timeDate;
          this.option4.xAxis[0].data = res.data[0].x;
          this.option4.series[0].data = res.data[0].y;
        }
        if (res.data[1].x.length == 0) {
          this.option5.title.text = res.data[1].name;
          this.option5.xAxis[0].data = [
            "粗破碎矿料",
            "粗破碎石料",
            "缓冲仓原矿(干)",
            "1#皮带原矿(干)",
            "尾矿量",
            "尾矿泥",
          ];
          this.option5.series[0].data = [0, 0, 0, 0, 0, 0];
        } else {
          this.option5.title.text = res.data[1].name + res.data[1].timeDate;
          this.option5.xAxis[0].data = res.data[1].x;
          this.option5.series[0].data = res.data[1].y;
        }

        if (res.data[2].x.length == 0) {
          this.option6.title.text = res.data[2].name;
          this.option6.yAxis[0].data = [
            "回收矿(干)",
            "机烧精粉(干)",
            "1#粉(干)",
            "05粒径",
            "12粒径",
            "13粒径",
            "水洗12石",
            "水洗13石",
            "尾矿机制砂石",
          ];
          this.option6.series[0].data = [0, 0, 0, 0, 0, 0, 0, 0, 0];
        } else {
          this.option6.title.text = res.data[2].name + res.data[2].timeDate;
          this.option6.yAxis[0].data = res.data[2].x;
          this.option6.series[0].data = res.data[2].y;
        }

        if (res.data[3].x.length == 0) {
          this.option7.title.text = res.data[3].name + res.data[3].timeDate;
          this.option7.yAxis[0].data = [
            "机烧精粉(干)",
            "1#粉(干)",
            "05粒径",
            "12粒径",
            "13粒径",
            "水洗12石",
            "水洗13石",
            "尾矿机制砂石",
          ];
          this.option7.yAxis[1].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
          this.option7.series[0].data = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        } else {
          this.option7.title.text = res.data[3].name + res.data[3].timeDate;
          this.option7.yAxis[0].data = res.data[3].x;
          this.option7.yAxis[1].data = res.data[3].y;
          this.option7.series[0].data = res.data[3].y;
        }
      });
    },
    getAllEqData() {
      surfdeviceGetAll2().then((res) => {
        console.log(res);
        res.data.list.forEach((item) => {
          //console.log(item.DEVICENAME, item.DX);
          //if (item.DX != null) {
          switch (item.geoId) {
            case 40:
              this.caikuangRegions2.push(item);
              break;
            //case 57: weikuang.push(item)
            //break;
            case 58:
              this.weikuangRegions2.push(item);
              break;
            case 56:
              this.paituRegions2.push(item);
              break;
            //}
          }
        });
      });
      //this.caikuangRegions2 = caikuang;
      //this.weikuangRegions2 = weikuang;
      //this.paituRegions2 = paitu;
      //console.log(this.caikuangRegions2,this.weikuangRegions2)
    },
    gbCheck(index) {
      console.log(index);
      let graphicsList = graphiBoundaryLayer.graphics;
      if (index == 1) {
        graphicsList.forEach((item, index) => {
          if (item.name == "车" || item.name == "人") {
            item.show = true;
          }
        });
      }
      if (index == 2) {
        graphicsList.forEach((item, index) => {
          if (item.name == "车") {
            item.show = false;
          }
          if (item.name == "人") {
            item.show = true;
          }
        });
      }
      if (index == 3) {
        graphicsList.forEach((item, index) => {
          if (item.name == "人") {
            item.show = false;
          }
          if (item.name == "车") {
            item.show = true;
          }
        });
      }
    },
    alarmClick(val) {
      this.alarmShow = true;
      let data = {};
      if (val == 0) {
        data = {
          importTime: this.getAlarmTime() + " 00:00:00",
          outTime: this.getAlarmTime() + " 23:59:59",
        };
      } else {
        data = {};
      }
      alarmlogGetList(data).then((res) => {
        console.log(res);
        if (res.success) {
          this.alarmList = res.data.list;
        }
      });
    },
    getAlarmTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, "0");
      const day = String(now.getDate()).padStart(2, "0");

      let currentTime = `${year}-${month}-${day}`;
      return currentTime;
    },
    homeEchart(data, tag) {
      this.ports[data.type]({ DEVICEID: data.ID }).then((res) => {
        console.log(res);
        let DHOption = [];
        let DXOption = [];
        let DXYOption = [];
        let dateOption = [];
        res.data.list.forEach((item) => {
          if (!dateOption.includes(item.DACTIME)) {
            dateOption.push(item.DACTIME);
            if (data.type == 3 || data.type == 4 || data.type == 5) {
              DHOption.push(item.V1);
              DXOption.push(item.V2);
              DXYOption.push(item.V3);
            } else {
              DHOption.push(item.DH);
              DXOption.push(item.DX);
              DXYOption.push(item.DXY);
            }
          }
        });
        if (dateOption.length == 0) {
          dateOption = [
            "00:00",
            "03:00",
            "05:00",
            "07:00",
            "09:00",
            "11:00",
            "13:00",
          ];
          DHOption = ["0", "0", "0", "0", "0", "0", "0"];
          DXOption = ["0", "0", "0", "0", "0", "0", "0"];
          DXYOption = ["0", "0", "0", "0", "0", "0", "0"];
        }
        if (tag == 1) {
          switch (data.type) {
            case 1:
              this.option9.series[0].name = "北向偏移量(mm)";
              this.option9.series[1].name = "东向偏移量(mm)";
              this.option9.series[2].name = "水平偏移量(mm)";
              this.option9.legend.data = [
                "北向偏移量(mm)",
                "东向偏移量(mm)",
                "水平偏移量(mm)",
              ];
              break;
            case 2:
              this.option9.series[0].name = "北向偏移量(mm)";
              this.option9.series[1].name = "东向偏移量(mm)";
              this.option9.series[2].name = "水平偏移量(mm)";
              this.option9.legend.data = [
                "北向偏移量(mm)",
                "东向偏移量(mm)",
                "水平偏移量(mm)",
              ];

              break;
            case 3:
              this.option9.series[0].name = "通道X振动峰值（cm/s）";
              this.option9.series[1].name = "通道Y振动峰值（cm/s）";
              this.option9.series[2].name = "通道Z振动峰值（cm/s）";
              this.option9.legend.data = [
                "通道X振动峰值（cm/s）",
                "通道Y振动峰值（cm/s）",
                "通道Z振动峰值（cm/s）",
              ];

              break;
            case 4:
              this.option9.series[0].name = "地下水位（m）";
              this.option9.series[1].name = "/";
              this.option9.series[2].name = "/";
              this.option9.legend.data = ["地下水位（m）"];

              break;
            case 5:
              this.option9.series[0].name = "深度（m）";
              this.option9.series[1].name = "/";
              this.option9.series[2].name = "/";
              this.option9.legend.data = ["深度（m）"];

              break;
            case 6:
              this.option9.series[0].name = "/";
              this.option9.series[1].name = "/";
              this.option9.series[2].name = "/";
              this.option9.legend.data = [];

              break;
            case 7:
              this.option9.series[0].name = "/";
              this.option9.series[1].name = "/";
              this.option9.series[2].name = "/";
              this.option9.legend.data = [];

              break;
            case 8:
              this.option9.series[0].name = "/";
              this.option9.series[1].name = "/";
              this.option9.series[2].name = "/";
              this.option9.legend.data = [];

              break;
          }
          this.option9.xAxis[0].data = dateOption.reverse();
          this.option9.series[0].data = DHOption.reverse();
          this.option9.series[1].data = DXOption.reverse();
          this.option9.series[2].data = DXYOption.reverse();
        } else {
          switch (data.type) {
            case 1:
              this.option2.series[0].name = "北向偏移量(mm)";
              this.option2.series[1].name = "东向偏移量(mm)";
              this.option2.series[2].name = "水平偏移量(mm)";
              break;
            case 2:
              this.option2.series[0].name = "北向偏移量(mm)";
              this.option2.series[1].name = "东向偏移量(mm)";
              this.option2.series[2].name = "水平偏移量(mm)";
              break;
            case 3:
              this.option2.series[0].name = "通道X振动峰值（cm/s）";
              this.option2.series[1].name = "通道Y振动峰值（cm/s）";
              this.option2.series[2].name = "通道Z振动峰值（cm/s）";
              break;
            case 4:
              this.option2.series[0].name = "地下水位（m）";
              this.option2.series[1].name = "/";
              this.option2.series[2].name = "/";
              break;
            case 5:
              this.option2.series[0].name = "深度（m）";
              this.option2.series[1].name = "/";
              this.option2.series[2].name = "/";
              break;
            case 6:
              this.option2.series[0].name = "/";
              this.option2.series[1].name = "/";
              this.option2.series[2].name = "/";

              break;
            case 7:
              this.option2.series[0].name = "/";
              this.option2.series[1].name = "/";
              this.option2.series[2].name = "/";

              break;
            case 8:
              this.option2.series[0].name = "/";
              this.option2.series[1].name = "/";
              this.option2.series[2].name = "/";

              break;
          }
          this.option2.xAxis.data = dateOption.reverse();
          this.option2.series[0].data = DHOption.reverse();
          this.option2.series[1].data = DXOption.reverse();
          this.option2.series[2].data = DXYOption.reverse();
        }
      });
    },

    // 判断echart显示的数据
    changeEchartView(type) {},
    fly(item) {
      //卡调信息聚焦
      console.log(item);
      map.setCameraView({
        lng: bd09towgs84(item.longitude, item.latitude)[0],
        lat: bd09towgs84(item.longitude, item.latitude)[1],
        alt: 1628,
      });
    },
    resetAyelDate() {
      this.getyieldData();
    },
    // 获取时间
    getToday() {
      const today = new Date();
      // 减去一天的毫秒数
      const yesterday = new Date(today);
      yesterday.setDate(today.getDate() - 1);

      const year = yesterday.getFullYear();
      const month = (yesterday.getMonth() + 1).toString().padStart(2, "0");
      const day = yesterday.getDate().toString().padStart(2, "0");

      return `${year}-${month}-${day}`;
    },
    startInterval() {
      // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex > 4 - 1) {
          this.currentIndex = 0;
        }
      }, 8000);
    },
    // 点击左右箭头
    clickIcon(val) {
      if (val === "down") {
        this.currentIndex++;
        if (this.currentIndex === 4) {
          this.currentIndex = 0;
        }
      } else {
        /* 第一种写法
					this.currentIndex--;
					if(this.currentIndex < 0){
						this.currentIndex = 4-1;
					} */
        // 第二种写法
        if (this.currentIndex === 0) {
          this.currentIndex = 4;
        }
        this.currentIndex--;
      }
    },
    // 点击控制圆点
    changeImg(index) {
      this.currentIndex = index;
    },
    //鼠标移入移出控制
    changeInterval(val) {
      if (val) {
        clearInterval(this.timer);
      } else {
        this.startInterval();
      }
    },

    // 设备下拉
    showEquipPhoto() {
      this.equipLi = !this.equipLi;
    },
    showEquipPhoto2() {
      this.equipLi2 = !this.equipLi2;
    },
    changeEquip(item) {
      console.log(item);
      this.homeEchart(item, 1);
      this.equipLi = false;
    },
    changeEquip2(item) {
      console.log(item);
      this.homeEchart(item, 2);
      this.equipLi2 = false;
    },
    setPositon() {
      map.setCameraView({
        lng: 114.608787,
        lat: 24.114685,
        alt: 928,
        pitch: -9,
        heading: -14,
      });
    },
    inlineCar(index) {
      console.log(index);
      this.equipTitle = "定位数据";
      this.dialogType = "1-12";
      this.activeName = index;
    },
    handleClose() {
      this.dialogVisible = false;
      this.isdestroy = true;
    },
    // websocket
    initWebSocket(e) {
      //初始化weosocket
      const wsuri = e;
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen(e) {
      //连接建立之后执行send方法发送数据
      let actions = { test: "hello world" };
      this.websocketsend(JSON.stringify(actions));
    },
    websocketonerror(e) {
      //连接建立失败重连
      this.initWebSocket(this.websoketURL);
    },
    websocketonmessage(e) {
      //数据接收

      const obj = JSON.parse(e.data);
      if (obj.msgType == "1") {
        this.i++;
        let arrs = Object.values(obj.data);
        let arr = [];
        // 加图片
        arr = arrs.filter((item) => {
          //return item.status != 1;
          if (item.status != 1) {
            if (item.type == 1) {
              item = Object.assign(item, {
                icon: "https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/wjj.png",
              });
            } else if (item.type == 3) {
              item = Object.assign(item, {
                icon: "https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/cc.png",
              });
            } else if (item.type == 4) {
              item = Object.assign(item, {
                icon: "https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/sdman.png",
              });
            } else if (item.type == 6) {
              item = Object.assign(item, {
                icon: "https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/stys.png",
              });
            } else if (item.type == 7) {
              item = Object.assign(item, {
                icon: "https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/wjj.png",
              });
            } else if (item.type == 5) {
              item = Object.assign(item, {
                icon: "https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/nyc.png",
              });
            } else if (item.type == 8) {
              item = Object.assign(item, {
                icon: "https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/upload/zjj.png",
              });
            } else if (item.type == 9) {
              item = Object.assign(item, {
                icon: "https://ryansystem-bucket.oss-cn-shenzhen.aliyuncs.com/icon/wy.png",
              });
            }
            return item;
          }
        });

        this.allEquip = arrs.sort((a, b) => b.status - a.status);
        this.onlineCar = arrs
          .filter((it) => it.type != 4)
          .sort((a, b) => b.status - a.status);
        this.onlineHum = arrs
          .filter((it) => it.type == 4)
          .sort((a, b) => b.status - a.status);
        //

        this.onMessageReceived(arr);
      }
    },

    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      this.websock.close();
    },
    onMessageReceived(newData) {
      // 将新数据和上一次数据进行比较
      const addedData = newData.filter(
        (newItem) =>
          !this.previousData.some((oldItem) => oldItem.carId === newItem.carId)
      );
      const removedData = this.previousData.filter(
        (oldItem) => !newData.some((newItem) => newItem.carId === oldItem.carId)
      );
      const unchangedData = this.previousData.filter((oldItem) =>
        newData.some((newItem) => newItem.carId === oldItem.carId)
      );
      this.unchangedData = unchangedData;
      // console.log( this.unchangedData );

      // 更新保存的上一次数据
      this.previousData = newData;

      // 打印比较结果

      addedData.forEach((item) => {
        this.createDom(item, true);
      });
      //console.log("删除对象:", removedData);
      let graphicsList = graphiBoundaryLayer.graphics;
      removedData.forEach((item) => {
        for (const vl of graphicsList) {
          if (item.carId == vl.options.attr.编码) {
            vl.destroy();
            continue;
          }
        }
      });
      unchangedData.forEach((item) => {
        for (const vl of graphicsList) {
          if (item.carId == vl.options.attr.编码) {
            vl.setOptions({
              position: new mars3d.LngLatPoint(
                bd09towgs84(item.longitude, item.latitude)[0],
                bd09towgs84(item.longitude, item.latitude)[1]
              ),
            });
            continue;
          }
        }
      });
    },
    createDom(it, bol) {
      if (it.type == 4) {
        //人员
        const graphic = new mars3d.graphic.FontBillboardEntity({
          name: "人",
          position: [
            bd09towgs84(it.longitude, it.latitude)[0],
            bd09towgs84(it.longitude, it.latitude)[1],
            it.altitude,
          ],
          style: {
            image: it.icon,
            scale: 0.7,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true,
            //label: {
            //  text: it.carName,
            //  color: "skyblue",
            //},
          },
          attr: {
            姓名: it.carName,
            工种: it.workType,
            //联系方式: it.telePhone,
            状态: it.status == 2 ? "运动" : "静止",
            //速度: it.speed,
            设备号: it.carId,
            geoId: it.geoId,
            //时间: getYearMateTime(new Date().valueOf()),
          },
          show: bol,
        });
        graphiBoundaryLayer.addGraphic(graphic);
        graphic.bindPopup(`<div class="tipModel" style="width: 440px;border-radius: 20px;z-index:999999;">
              <div class="tipModel_header"></div>
              <div class="tipModel_body">
                <span style="display:block;width: 440px;height: 30px;background-color:#87CEFA;font-size:20px;color:#2a72ad;font-weight:bold;text-align:center;">人员信息</span>
  
                <div class="carInfo" style="display:flex;justify-content:space-around;flex-wrap: wrap;background-color: #fff;color:#000">
                  <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">姓名&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.carName
                    }</span></p>
                  </div>
                  <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">工种&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.workType
                    }</span></p>
                  </div> 
                  <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">电话&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.telePhone
                    }</span></p>
                  </div>
                  <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">状态&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.status == 2 ? "运动" : "静止"
                    }</span></p>
                  </div>
                  <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">速度&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.speed + "m/s"
                    }</span></p>
                  </div>
                  <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">位置&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.geoId
                    }</span></p>
                  </div>
                  <div class="carItem" style="width:50%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">海拔&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.altitude + "m"
                    }</span></p>
                  </div>
                  <div class="carItem" style="width:50%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">时间&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${getYearMateTime(
                      new Date().valueOf()
                    )}</span></p>
                  </div>
                  <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">经度&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.latitude == undefined ? "/" : it.latitude.toFixed(5)
                    }</span></p>
                </div>
                <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">纬度&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.longitude == undefined ? "/" : it.longitude.toFixed(5)
                    }</span></p>
                </div>
                </div>
              </div>
            </div>`);

        // if(it.geoId == 40){
        //   this.CKlist.push(graphic)
        // }else if(it.geoId == 58){
        //   this.WKlist.push(graphic)
        // }else if(it.geoId == 56){
        //   this.PTlist.push(graphic)
        // }

        // console.log(it,this.CKlist,this.WKlist,this.PTlist,'9ioiojasdjadasdas')
      } else {
        //车辆
        const graphic = new mars3d.graphic.FontBillboardEntity({
          name: "车",
          position: [
            bd09towgs84(it.longitude, it.latitude)[0],
            bd09towgs84(it.longitude, it.latitude)[1],
            it.altitude,
          ],
          style: {
            image: it.icon,
            scale: 0.7,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true,
            //label: {
            //  text: it.carName,
            //  color: this.carColor[it.type],
            //},
          },
          attr: {
            车牌号: it.carName,
            //速度: it.speed,
            状态: it.status == 2 ? "运动" : "静止",
            车辆类型: this.equipTypes[it.type],
            geoId: it.geoId,
            //时间: getYearMateTime(new Date().valueOf()),
          },
          show: bol,
        });
        graphiBoundaryLayer.addGraphic(graphic);
        graphic.bindPopup(`<div class="tipModel" style="width: 440px;border-radius: 20px;z-index:999999;">
              <div class="tipModel_header"></div>
              <div class="tipModel_body">
                <span style="display:block;width: 440px;height: 30px;background-color:#87CEFA;font-size:20px;color:#2a72ad;font-weight:bold;text-align:center;">车辆信息</span>
  
                <div class="carInfo" style="display:flex;justify-content:space-around;flex-wrap: wrap;background-color: #fff;color:#000">
                  <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">车牌&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.carName
                    }</span></p>
                  </div>
                  <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">种类&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      this.equipTypes[it.type]
                    }</span></p>
                  </div> 
                  <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">购置&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                  <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">状态&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.status == 2 ? "运动" : "静止"
                    }</span></p>
                </div>
                <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">速度&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.speed + "m/s"
                    }</span></p>
                </div>
                <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">位置&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.geoId
                    }</span></p>
                </div>
                <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">海拔&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.altitude + "m"
                    }</span></p>
                </div>
                <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">型号&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                </div>
                <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">时间&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${getYearMateTime(
                      new Date().valueOf()
                    )}</span></p>
                </div>
                <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">联系方式&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.personTel == undefined ? "/" : it.personTel
                    }</span></p>
                </div>
                <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">经度&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.latitude == undefined ? "/" : it.latitude.toFixed(5)
                    }</span></p>
                </div>
                <div class="carItem" style="width:33%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">纬度&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${
                      it.longitude == undefined ? "/" : it.longitude.toFixed(5)
                    }</span></p>
                </div>
                </div>
              </div>
            </div>`);
      }
    },
    // 视频搜索
    search() {
      if (this.inputValue) {
        this.videoOpenList = this.videoOpenList.filter((data) =>
          data.cameraName.includes(this.inputValue)
        );
      } else {
        this.videoOpenList = this.valueList;
      }
    },
    //人车搜索
    carSearch() {
      console.log("111", this.carInputValue, this.onlineHum);
      //if (true) {
      //  if (this.activeName == "1") {
      //    console.log("111", this.carInputValue, this.onlineHum);
      //    this.onlineHum = this.onlineHum.filter((data) => {
      //      data.carName.includes(this.carInputValue);
      //    });
      //    console.log(this.onlineHum);
      //  } else if (this.activeName == "2") {
      //    console.log("222", this.carInputValue, this.onlineCar);
      //    this.onlineCar = this.onlineCar.filter((data) => {
      //      data.carName.includes(this.carInputValue);
      //    });
      //    console.log(this.onlineCar);
      //  } else {
      //    console.log("333", this.carInputValue, this.allEquip);
      //    this.allEquip = this.allEquip.filter((data) => {
      //      data.carName.includes(this.carInputValue);
      //    });
      //    console.log(this.allEquip);
      //  }
      //}
    },
    //视频点击
    videoOpen(v) {
      let graphicsList = graphiBoundaryLayer.graphics;
      //graphicsList.forEach((item, index) => {
      //  if (item.name == "视屏监控" || item.name == "视频盒子") {
      //    if (item.attr.id == v.id) {
      //      item.show = true;
      //    } else {
      //      item.show = false;
      //    }
      //  }
      //});
      // map.setCameraView({ lng: v.x, lat: v.y, alt: 700, heading: 359, pitch: -45, }, {});

      map.setCameraView({ lng: v.x, lat: v.y });
      this.cameraIndexCode = v.cameraIndexCode;
      this.cameraName = v.cameraName;
      this.dialogVisible = true;
      this.isdestroy = false;
      this.videoS = false;
      this.$nextTick(() => {
        this.videoS = true;
      });
    },
    // 地磅点击
    balanceOpen(v) {
      let graphicsList = graphiBoundaryLayer.graphics;

      map.setCameraView({ lng: v.x, lat: v.y });
      graphicsList.forEach((item, index) => {
        if (item.name == "电子地磅") {
          if (item.attr.id == v.id) {
            item.show = true;
          } else {
            item.show = false;
          }
        }
      });
    },

    equipFor(res, type) {
      console.log(res);
      let DHOption = [];
      let DXOption = [];
      let DXYOption = [];
      let dateOption = [];
      res.data.list.forEach((item) => {
        if (!dateOption.includes(item.DACTIME)) {
          dateOption.push(item.DACTIME);
          if (type == 3 || type == 4 || type == 6 || type == 7 || type == 9) {
            DHOption.push(item.V1);
            DXOption.push(item.V2);
            DXYOption.push(item.V3);
          } else {
            DHOption.push(item.DH);
            DXOption.push(item.DX);
            DXYOption.push(item.DXY);
          }
        }
      });
      this.equipEchartOption.xAxis.data = dateOption.reverse();
      this.equipEchartOption1.xAxis.data = dateOption.reverse();
      this.equipEchartOption2.xAxis.data = dateOption.reverse();

      this.equipEchartOption.series[0].data = DHOption.reverse();
      this.equipEchartOption1.series[0].data = DXOption.reverse();
      this.equipEchartOption2.series[0].data = DXYOption.reverse();
      this.equipColor = this.equipColorType[res.type];
    },
    // 传感器点击
    equipClick(data) {
      console.log(data);
      this.equipView = "2";
      this.newEquipData = data;
      let type = data.type;
      if (type == 1) {
        surfdevicedataGet({ DEVICEID: data.ID }).then((res) => {
          this.equipEchartOption.title.text = "北向偏移量(mm)";
          this.equipEchartOption1.title.text = "东向偏移量(mm)";
          this.equipEchartOption2.title.text = "水平偏移量(mm)";
          this.equipEchartOption.series[0].name = "北向偏移量(mm)";
          this.equipEchartOption1.series[0].name = "东向偏移量(mm)";
          this.equipEchartOption2.series[0].name = "水平偏移量(mm)";
          this.equipFor(res, type);
        });
      } else if (type == 2) {
        inmvdevicedataGet({ DEVICEID: data.ID }).then((res) => {
          this.equipEchartOption.title.text = "北向偏移量(mm)";
          this.equipEchartOption1.title.text = "东向偏移量(mm)";
          this.equipEchartOption2.title.text = "水平偏移量(mm)";
          this.equipEchartOption.series[0].name = "北向偏移量(mm)";
          this.equipEchartOption1.series[0].name = "东向偏移量(mm)";
          this.equipEchartOption2.series[0].name = "水平偏移量(mm)";
          this.equipFor(res, type);
        });
      } else if (type == 3) {
        //爆破振动
        boomdeviceeventGet({ DEVICEID: data.ID }).then((res) => {
          this.equipEchartOption.title.text = "通道X振动峰值（cm/s）";
          this.equipEchartOption1.title.text = "通道Y振动峰值（cm/s）";
          this.equipEchartOption2.title.text = "通道Z振动峰值（cm/s）";
          this.equipEchartOption.series[0].name = "通道X振动峰值（cm/s）";
          this.equipEchartOption1.series[0].name = "通道Y振动峰值（cm/s）";
          this.equipEchartOption2.series[0].name = "通道Z振动峰值（cm/s）";
          this.equipFor(res, type);
        });
      } else if (type == 4) {
        phrldevicedataGet({ DEVICEID: data.ID }).then((res) => {
          this.equipEchartOption.title.text = "地下水位(mm)";
          this.equipEchartOption.series[0].name = "地下水位(mm)";
          this.equipFor(res, type);
        });
      } else if (type == 5) {
        leveldevicedataGet({ DEVICEID: data.ID }).then((res) => {
          this.equipEchartOption.title.text = "深度（m）";
          this.equipEchartOption.series[0].name = "深度（m）";
          this.equipFor(res, type);
        });
      } else if (type == 6) {
        beachdevicedataGet({ DEVICEID: data.ID }).then((res) => {
          this.equipEchartOption.title.text = "长度(m)";
          this.equipEchartOption.series[0].name = "长度(m)";
          this.equipFor(res, type);
        });
      } else if (type == 7) {
        flowdevicedataGet({ DEVICEID: data.ID }).then((res) => {
          this.equipEchartOption.title.text = "高度（m）";
          this.equipEchartOption.series[0].name = "高度（m）";
          this.equipFor(res, type);
        });
      } else if (type == 8) {
        //降雨量
        raindevicedataGet({ DEVICEID: data.ID }).then((res) => {
          this.equipEchartOption.title.text = "降雨量（mm）";
          this.equipEchartOption.series[0].name = "降雨量（mm）";
          this.equipFor(res, type);
        });
      } else if (type == 9) {
        flowdevicedataGet({ DEVICEID: data.ID }).then((res) => {
          this.equipEchartOption.title.text = "流速(m³/s)";
          this.equipEchartOption.series[0].name = "流速(m³/s)";

          this.equipFor(res, type);
        });
      } else if (type == 10) {
        //浸润线
        flowdevicedataGet({ DEVICEID: data.ID }).then((res) => {
          this.equipEchartOption.title.text = "深度（m）";
          this.equipEchartOption.series[0].name = "深度（m）";

          this.equipFor(res, type);
        });
      }

      //this.equipEchartOption.series[0].data = data.histList;
      //this.equipColor = this.equipColorType[data.name];
    },
    opType1() {
      this.showbro1 = true;
      this.showbro2 = true;
      if (this.showbro1 && this.showbro2) {
        this.leftShow = true;
      }
    },
    opType2() {
      if (this.equipView == "2") {
        this.equipView = "1";
        return;
      }

      let graphicsList = graphiBoundaryLayer.graphics;
      graphicsList.forEach((element) => {
        if (element.name != "矿界面积") {
          element.show = false;
        }
      });
      this.showbro2 = true;
      // this.showbro2 = true
      if (this.showbro1 && this.showbro2) {
        this.leftShow = true;
      }
    },
    model1() {
      //       this.graphiBoundaryLayer.on(mars3d.EventType.click, function (event) {
      //  event.target.show = !event.target.show
      // })
    },

    // 创建尾矿库设备点位
    createWkk() {
      console.log("创建尾矿库设备点位");
      this.weikuangRegions.forEach((item) => {
        const graphic = new mars3d.graphic.BillboardEntity({
          name: "尾矿库设备",
          position: new mars3d.LngLatPoint(item.SCRX, item.SCRY, 999),
          style: {
            image: this.equipImgList[item.type],
            scale: 0.7,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true,
          },
          attr: {
            名称: item.DEVICENAME,
            数值: "0.01",
            //时间: getYearMateTime(new Date().valueOf()),
          },
          show: false,
        });
        graphiBoundaryLayer.addGraphic(graphic); //divText
        graphic.bindPopup(() => {
          this.equipClick(item);
        });
      });
    },

    handleClick(v) {
      if (v.id == 3) {
        this.$router.push("/reqindex/index");
      }
      if (v.id == 1) {
        this.showbro1 = !this.showbro1;

        if (this.showbro2) {
          this.showbro2 = false;
        }
        this.showbro2 = !this.showbro2;
        this.leftShow = !this.leftShow;
        this.baseList = v.children;
        if (this.showbro1) {
          this.setPositon(); //设置视角
          //this.showbro2 = false;
          let graphicsList = graphiBoundaryLayer.graphics;
          graphicsList.forEach((item, index) => {
            if (item.name == "人" || item.name == "车") {
              item.show = true;
            } else {
              item.show = false;
            }
          });
        }
      }
    },
    removeDom() {
      let graphicsList = graphiBoundaryLayer.graphics;
      graphicsList.forEach((item, index) => {
        //if (item.name = "边界坐标") {
        //  item.show = false;
        //}
        if (item.name == "视频盒子") {
          item.show = false;
        }
        if (item.name == "视屏监控") {
          item.show = false;
        }
        if (item.name == "人") {
          item.show = false;
        }
        if (item.name == "车") {
          item.show = false;
        }
        if (item.name == "电子地磅") {
          item.show = false;
        }
        if (item.name == "应急广播") {
          item.show = false;
        }
      });
    },
    handle(v) {
      let graphicsList = graphiBoundaryLayer.graphics;
      switch (v.id) {
        case "1-1":
          this.removeDom();
          graphicsList.forEach((item, index) => {
            if (item.name == "边界坐标") {
              item.show = true;
            }
            if (item.name == "矿界面积") {
              item.show = true;
            }
            if (item.name == "视频盒子") {
              item.show = false;
            }
            if (item.name == "视屏监控") {
              item.show = false;
            }
          });
          break;

        case "1-2":
          this.dialogType = v.id;
          this.equipTitle = "视频监控点位信息";

          this.showbro2 = true;

          graphicsList.forEach((item, index) => {
            if (item.name == "视屏监控") {
              item.show = true;
              if (this.dialogType == v.id) {
                this.showbro2 = false;
              }
            } else {
              item.show = false;
            }
          });
          break;
        case "1-3":
          this.infoShow = true;
          this.showbro2 = true;
          this.equipView = "1";
          this.equipTitle = "采矿场监测信息";
          this.dialogType = v.id;
          if (this.dialogType == v.id) {
            this.showbro2 = false;
          }
          let x = null;
          let y = null;
          graphicsList.forEach((item, index) => {
            if (item.name == "采矿场设备" || item.options.attr.geoId == 40) {
              item.show = true;
            } else {
              item.show = false;
            }
            let arr = Object.keys(item.attr);
            if (arr.length != 0) {
              if (Reflect.has(item.attr, "item")) {
                if (item.attr.item.attr.name == "开采区") {
                  item.show = true;
                  let arr1 = item.attr.item.positions;
                  for (let i = 0; i < arr1.length; i++) {
                    x += arr1[i][0];
                    y += arr1[i][1];
                  }
                  map.setCameraView({
                    lng: x / arr1.length,
                    lat: y / arr1.length,
                    alt: 4000,
                  });
                  console.log(x / arr1.length, y / arr1.length);
                } else {
                  item.show = false;
                }
              }
            }
          });

          break;
        case "1-4":
          this.infoShow = true;
          this.showbro2 = true;

          this.equipTitle = "尾矿库监测信息";
          this.dialogType = v.id;
          if (this.dialogType == v.id) {
            this.showbro2 = false;
          }
          let x1 = null;
          let y1 = null;
          graphicsList.forEach((item, index) => {
            if (item.name == "尾矿库设备" || item.options.attr.geoId == 58) {
              item.show = true;
            } else {
              item.show = false;
            }

            let arr = Object.keys(item.attr);
            if (arr.length != 0) {
              if (Reflect.has(item.attr, "item")) {
                if (
                  item.attr.item.attr.name == "一期尾矿库" ||
                  item.attr.item.attr.name == "二期尾矿库"
                  //item.attr.item.attr.name == "一期尾矿库"
                ) {
                  item.show = true;

                  let arr1 = item.attr.item.positions;
                  for (let i = 0; i < arr1.length; i++) {
                    x1 += arr1[i][0];
                    y1 += arr1[i][1];
                  }
                  map.setCameraView({
                    lng: 114.596604,
                    lat: 24.115557,
                    alt: 4000,
                  });
                } else {
                  item.show = false;
                }
              }
            }
          });

          break;
        case "1-5":
          this.infoShow = true;
          this.showbro2 = true;
          this.equipTitle = "排土场监测信息";
          this.dialogType = v.id;
          if (this.dialogType == v.id) {
            this.showbro2 = false;
          }
          let x3 = null;
          let y3 = null;
          graphicsList.forEach((item, index) => {
            if (item.name == "排土场设备" || item.options.attr.geoId == 58) {
              item.show = true;
            } else {
              item.show = false;
            }
            let arr = Object.keys(item.attr);
            if (arr.length != 0) {
              if (Reflect.has(item.attr, "item")) {
                if (item.attr.item.attr.name == "排土场") {
                  this.removeDom();
                  item.show = true;
                  let arr1 = item.attr.item.positions;
                  for (let i = 0; i < arr1.length; i++) {
                    x3 += arr1[i][0];
                    y3 += arr1[i][1];
                  }
                  map.setCameraView({
                    lng: x3 / arr1.length,
                    lat: y3 / arr1.length,
                    alt: 4000,
                  });
                } else {
                  item.show = false;
                }
              }
            }
          });

          break;
        case "1-6":
          this.showbro2 = true;
          this.equipTitle = "炸药库";
          this.dialogType = v.id;
          if (this.dialogType == v.id) {
            this.showbro2 = false;
          }
          let x2 = null;
          let y2 = null;
          graphicsList.forEach((item, index) => {
            let arr = Object.keys(item.attr);
            if (arr.length != 0) {
              if (Reflect.has(item.attr, "item")) {
                if (item.attr.item.attr.name == "炸药库") {
                  this.removeDom();
                  item.show = true;

                  let arr1 = item.attr.item.positions;
                  for (let i = 0; i < arr1.length; i++) {
                    x2 += arr1[i][0];
                    y2 += arr1[i][1];
                  }
                  map.setCameraView({
                    lng: x2 / arr1.length,
                    lat: y2 / arr1.length,
                    alt: 3000,
                  });
                } else {
                  item.show = false;
                }
                // if (item.attr.item.text == "炸药库") {
                //   item.show = true;
                // }
              }
            }
          });
          break;
        case "1-7":
          graphicsList.forEach((item, index) => {
            if (item.name == "智能排污") {
              item.show = true;
              if (this.dialogType == v.id) {
                this.showbro2 = false;
              }
            } else {
              item.show = false;
            }
          });
          pollutionGet({}).then((res) => {
            this.paiwuData = res.data.list[0];
          });
          this.showbro2 = true;
          this.equipTitle = "监测信息";
          this.dialogType = v.id;
          if (this.dialogType == v.id) {
            this.showbro2 = false;
          }
          break;
        case "1-8":
          graphicsList.forEach((item, index) => {
            if (item.name == "排洪隧道") {
              item.show = true;
              if (this.dialogType == v.id) {
                this.showbro2 = false;
              }
            } else {
              item.show = false;
            }
          });
          break;

        case "1-9":
          this.equipTitle = "应急广播点位列表";

          this.dialogType = v.id;
          this.showbro2 = true;
          graphicsList.forEach((item, index) => {
            if (item.name == "应急广播") {
              item.show = true;
              if (this.dialogType == v.id) {
                this.showbro2 = false;
              }
            } else {
              item.show = false;
            }
          });
          break;
        case "1-10":
          this.showbro2 = true;
          this.equipTitle = "电子地磅点位列表";
          this.dialogType = v.id;
          if (this.dialogType == v.id) {
            this.showbro2 = false;
          }
          graphicsList.forEach((item, index) => {
            if (item.name == "电子地磅") {
              item.show = true;
            } else {
              item.show = false;
            }
          });

          break;
        case "1-11":
          this.showbro2 = true;
          this.equipTitle = "绿色智能系统信息";
          this.dialogType = v.id;
          if (this.dialogType == v.id) {
            this.showbro2 = false;
          }
          break;
        case "1-12":
          //定位王定位数据
          //this.websock.close();
          graphicsList.forEach((item, index) => {
            if (item.name == "人" || item.name == "车") {
              item.show = true;
              this.showbro2 = true;
              this.equipTitle = "在线信息";
              this.dialogType = v.id;
              if (this.dialogType == v.id) {
                this.showbro2 = false;
              }
            } else {
              item.show = false;
            }
          });

        default:
          break;
      }
    },

    // 地图构造完成回调
    onMapload(mapInstance) {
      map = mapInstance;
      //map.scene.globe.terrainExaggeration = 2
      map.fixedLight = true; // 固定光照，避免gltf模型随时间存在亮度不一致。
      //     console.log(map.scene);
      // map.scene.center.pitch = 277;
      // 固定光照时间
      map.clock.currentTime = Cesium.JulianDate.fromDate(
        new Date("2022-11-01 12:00:00")
      );
      // map.clock.shouldAnimate = false
      // 固定光照方向
      map.scene.light = new Cesium.DirectionalLight({
        direction: map.scene.camera.direction,
      });
      map.camera.percentageChanged = 0.001;
      map.on(mars3d.EventType.cameraChanged, (event) => {
        map.scene.light.direction = map.scene.camera.direction;
      });
      map.addLayer(graphiBoundaryLayer);
      // 摄像头
      this.addVideoGraphic(graphiBoundaryLayer, null);

      // 边界
      //this.addGraphics(graphiBoundaryLayer)
      this.addPartitionGraphic();

      //创建采矿场设备点位方法
      this.createCkc(graphiBoundaryLayer);

      // 地磅
      this.addBalanceModel(graphiBoundaryLayer);
      // 排污
      this.addpaiwu(graphiBoundaryLayer);
      // 广播
      this.addBroadcastModel(graphiBoundaryLayer);
      // 排水
      this.addDemoGraphic5(graphiBoundaryLayer);
      map.scene.globe.depthTestAgainstTerrain = false;
      // map.addLayer(graphicLayer);
      // 无人机航拍
      this.addTilesetLayer1(map);

      //this.setMAP(map);
      //map.setCursor(true);

      // document.body.style.backgroundColor = "#0d92c9"
      // this.addTilesetLayer2(map);
      // this.addTilesetLayer3(map);

      // let se = bd09towgs84(117.218455, 31.82957);
      // let po = Cesium.Cartesian3.fromDegrees(117.218455, 31.82957)

      map.on(mars3d.EventType.click, (event) => {
        const cartesian = event.cartesian;
        const point = mars3d.LngLatPoint.fromCartesian(cartesian);
        console.log(point.lng, point.lat);
      });

      // addGraphicModelEntity()
      //玉水专属
      // this.addDemoGraphic();
      //  var defaultContextmenuItems =getDefaultContextMenu(map)
      //  console.log(defaultContextmenuItems);
      //   map.bindContextMenu(defaultContextmenuItems)

      // 创建entity图层
      // const graphicLayer = new this.mars3d.layer.GraphicLayer()
      // map.addLayer(graphicLayer)

      // 地下模式
      //  const  underground = new mars3d.thing.Underground({

      //   enabled:true
      // })
      // map.addThing(underground)

      this.getinfo();

      // this.websoketURL = `wss://www.dading-mine.com:11028/websocket?uid=1&cityid=1`;

      // this.initWebSocket(this.websoketURL);

      // this.websoketURL = `ws://120.79.94.15:11028/websocket?uid=1&cityid=1`;

      // this.initWebSocket(this.websoketURL);
    },
    // 矿区边界
    async getinfo() {
      let res = await mineinfo({});
      if (res.code == 200) {
        console.log(res);

        this.mineBorder = res.rows[0].mineBorder.split(";");
        let lists = [];
        this.mineBorder.forEach((item) => {
          let a = item.split(",");
          a.push(700);

          lists.push(a);
        });
        console.log(lists);

        // this.arrChange(2,this.mineBorder)
        // console.log(this.arrChange(2, this.mineBorder));

        const graphicLine = new mars3d.graphic.PolylineEntity({
          positions: lists,
          name: "矿界面积",
          style: {
            width: 4,
            closure: true,
            materialType: mars3d.MaterialType.DigitalFlow,
            materialOptions: {
              color: "#fff",
              //speed: 10,
              opacity: 0.5,
            },
          },
          attr: { remark: "PolylineEntity线" },
          show: false,
        });
        graphiBoundaryLayer.addGraphic(graphicLine);

        //lists.forEach((item, index) => {
        //  const graphic = new mars3d.graphic.BillboardEntity({
        //    position: item,
        //    name: "矿界面积",
        //    style: {
        //      image: require('@/assets/images/jiezhuang.png'),
        //      scale: 0.2,
        //      horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        //      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        //      depthTest: false,
        //      hasZIndex: false,
        //      frameRate: 1,
        //      offsetX: -10,
        //      offsetY: 10,
        //    },
        //    attr: { remark: "示例9" },
        //    pointerEvents: false,
        //    show: true, // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
        //  });
        //  graphiBoundaryLayer.addGraphic(graphic);
        //});
      }
    },
    // 智能排水
    addDemoGraphic5(graphiBoundaryLayer) {
      let list = [
        { lng: 114.61394495706267, lat: 24.12482055608893 },
        { lng: 114.61690038218953, lat: 24.127063172683425 },
        { lng: 114.61876885764966, lat: 24.129008940162695 },
      ];
      let jk = [];
      list.forEach((item) => {
        let se = bd09towgs84(item.lng, item.lat);
        jk.push([se[0], se[1], 700]);
      });
      const graphic1 = new mars3d.graphic.PolylineVolumeEntity({
        positions: jk,
        name: "排洪隧道",
        style: {
          shape: "pipeline",
          radius: 6,
          slices: 4, // 方形管道
          startAngle: 45,
          color: "#dbdbdb",
          outline: true,
          outlineColor: "#0a8cff",
        },
        show: false,
      });
      graphiBoundaryLayer.addGraphic(graphic1);
      graphic1.bindPopup(`<div class="tipModel" style="width: 300px;border-radius: 20px;z-index:999999;">
              <div class="tipModel_header"></div>
              <div class="tipModel_body">
                <span style="display:block;width: 300px;height: 30px;background-color:#87CEFA;font-size:20px;color:#2a72ad;font-weight:bold;text-align:center;">排洪隧道信息</span>
  
                <div class="carInfo" style="display:flex;justify-content:space-around;flex-wrap: wrap;background-color: #fff;color:#000">
                 
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">长度&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">孔径&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">材料&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">安装时间&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                  
                </div>
              </div>
            </div>`);
      // 还可以另外一种写法: graphic.addTo(graphicLayer)
      const graphic2 = new mars3d.graphic.DivGraphic({
        position: jk[0],
        name: "排洪隧道",
        style: {
          html: `<div style="color:#ffe800;font-size:15px;">
             排洪隧道  
          </div>`,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          depthTest: false,
          hasZIndex: false,
          frameRate: 1,
          offsetX: 80,
          offsetY: -50,
        },
        attr: {
          名称: "排洪隧道",
        },
        pointerEvents: false,
        show: false, // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
      });
      graphiBoundaryLayer.addGraphic(graphic2);

      const particleSystem = new mars3d.graphic.ParticleSystem({
        position: jk[0], // 位置
        name: "排洪隧道",
        style: {
          image: require("../../assets/s/smoke.png"),
          particleSize: 16, // 粒子大小（单位：像素）
          emissionRate: 100.0, // 发射速率 （单位：次/秒）
          heading: -60, // 方向角
          pitch: 45, // 俯仰角
          gravity: -11, // 重力因子，会修改速度矢量以改变方向或速度（基于物理的效果）
          transZ: 5, // 离地高度（单位：米）

          // maxHeight: 2000, // 超出该高度后不显示粒子效果

          startColor: Cesium.Color.LIGHTCYAN.withAlpha(0.3), // 开始颜色
          endColor: Cesium.Color.WHITE.withAlpha(0.0), // 结束颜色
          minimumParticleLife: 1, // 最小寿命时间（秒）
          maximumParticleLife: 4, // 最大寿命时间（秒）
          minimumSpeed: 10.0, // 最小速度(米/秒)
          maximumSpeed: 14.0, // 最大速度(米/秒)
        },
        show: false,
        attr: {
          名称: "排洪隧道",
        },
      });
      graphiBoundaryLayer.addGraphic(particleSystem);
      let s = bd09towgs84(114.6165455515132, 24.132603584401807);
      const graphic3 = new mars3d.graphic.BillboardEntity({
        position: new mars3d.LngLatPoint(s[0], s[1], 700),
        name: "排洪隧道",
        style: {
          image: this.imgShuiBeng,
          scale: 0.4,
          horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          clampToGround: true,
        },
        show: false,
        attr: {
          名称: "排洪隧道",
        },
      });
      graphiBoundaryLayer.addGraphic(graphic3);

      graphic3.bindPopup(`<div class="tipModel" style="width: 300px;border-radius: 20px;z-index:999999;">
              <div class="tipModel_header"></div>
              <div class="tipModel_body">
                <span style="display:block;width: 300px;height: 30px;background-color:#87CEFA;font-size:20px;color:#2a72ad;font-weight:bold;text-align:center;">潜水泵信息</span>
  
                <div class="carInfo" style="display:flex;justify-content:space-around;flex-wrap: wrap;background-color: #fff;color:#000">
                  <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">名称&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">型号&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">位置&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">安装时间&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                  
                </div>
              </div>
            </div>`);

      const graphic4 = new mars3d.graphic.DivGraphic({
        position: new mars3d.LngLatPoint(s[0], s[1], 700),
        name: "排洪隧道",
        style: {
          html: `<div style="color:#ffe800;font-size:15px;">
        
        </div>`,
          horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          depthTest: true,
          hasZIndex: false,
          frameRate: 1,
          offsetX: 50,
          offsetY: 50,
        },
        attr: {
          名称: "排洪隧道",
        },
        pointerEvents: false,
        show: false, // false时不允许拾取和触发任意鼠标事件，但可以穿透div缩放地球
      });
      graphiBoundaryLayer.addGraphic(graphic4);
    },

    // 入参 num:需要转换成几维数组，arr:需要转化的数组
    // 出参 转换后的数组
    arrChange(num, arr) {
      const newArr = [];
      while (arr.length > 0) {
        newArr.push(arr.splice(0, num));
      }
      return newArr;
    },

    // 区域划分
    addPartitionGraphic() {
      geometryList().then((res) => {
        console.log(res, this.home.features);
        res.data.forEach((item, index) => {
          this.home.features.push({
            type: "Feature",
            properties: {
              name: `${item.name}`,
              color: `${item.color}`,
              geoId: `${item.id}`,
            },
            geometry: {
              type: "Polygon",
              coordinates: [
                // item.geometry
                JSON.parse(item.geometry),
              ],
            },
          });
        });
        this.addGraphics(graphiBoundaryLayer);
      });
    },
    // 地磅点位
    addBalanceModel(graphicLayer) {
      listEquipDevice({
        pageNum: 1,
        pageSize: 99,
        type: 3,
      }).then((res) => {
        this.balanceOpenList = res.rows;
        res.rows.forEach((item) => {
          const graphic5 = new mars3d.graphic.BillboardEntity({
            name: "电子地磅",
            position: new mars3d.LngLatPoint(item.x, item.y, 6),
            style: {
              image: this.imgBalance,
              scale: 0.8,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true,
            },
            attr: {
              名称: item.deviceName,
              id: item.id,
            },
            show: false,
          });
          graphicLayer.addGraphic(graphic5);
          graphic5.bindPopup(`<div class="tipModel" style="width: 300px;border-radius: 20px;z-index:999999;">
              <div class="tipModel_header"></div>
              <div class="tipModel_body">
                <span style="display:block;width: 300px;height: 30px;background-color:#87CEFA;font-size:20px;color:#2a72ad;font-weight:bold;text-align:center;">地磅信息</span>
  
                <div class="carInfo" style="display:flex;justify-content:space-around;flex-wrap: wrap;background-color: #fff;color:#000">
                  <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">名称&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${item.deviceName}</span></p>
                  </div>
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">型号&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${item.id}</span></p>
                  </div>
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">位置&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">安装时间&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                  
                </div>
              </div>
            </div>`);
        });
      });
    },
    //排污点位
    addpaiwu(graphicLayer) {
      listPollutantDevice({
        pageNum: 1,
        pageSize: 99,
      }).then((res) => {
        console.log(res, "排污点位");
        res.rows.forEach((item) => {
          const graphic0 = new mars3d.graphic.BillboardEntity({
            name: "智能排污",
            position: new mars3d.LngLatPoint(item.lat, item.lng, 6),
            style: {
              image: this.imgPaiwu,
              scale: 0.8,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true,
            },
            show: false,
          });
          graphicLayer.addGraphic(graphic0);
        });
      });
    },
    // 创建采矿场设备点位
    async createCkc(graphicLayer) {
      // 所有点位数据
      await surfdeviceGetAll().then((res) => {
        console.log(res);
        let caikuang = [];
        let weikuang = [];
        let paitu = [];
        res.data.list.forEach((item) => {
          //console.log(item.DEVICENAME, item.DX);
          //if (item.DX != null) {
          switch (item.geoId) {
            case 40:
              caikuang.push(item);
              break;
            //case 57: weikuang.push(item)
            //break;
            case 58:
              weikuang.push(item);
              break;
            case 56:
              paitu.push(item);
              break;
          }
          //}
        });
        this.caikuangRegions = caikuang;
        this.weikuangRegions = weikuang;
        this.paituRegions = paitu;

        // console.log('创建采矿场设备点位',this.caikuangRegions)
        this.caikuangRegions.forEach((item) => {
          const graphic = new mars3d.graphic.BillboardEntity({
            name: "采矿场设备",
            position: new mars3d.LngLatPoint(item.SCRX, item.SCRY, 999),
            style: {
              image: this.equipImgList[item.type],
              scale: 0.7,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true,
            },
            attr: {
              名称: item.DEVICENAME,
            },
            show: false,
          });
          graphicLayer.addGraphic(graphic); //divText
          graphic.bindPopup(() => {
            this.equipClick(item);
          });
        });
        // console.log('创建尾矿库设备点位',this.caikuangRegions)
        this.weikuangRegions.forEach((item) => {
          const graphic = new mars3d.graphic.BillboardEntity({
            name: "尾矿库设备",
            position: new mars3d.LngLatPoint(item.SCRX, item.SCRY, 999),
            style: {
              image: this.equipImgList[item.type],
              scale: 0.7,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true,
            },
            attr: {
              名称: item.DEVICENAME,
              数值: "0.01",
              //时间: getYearMateTime(new Date().valueOf()),
            },
            show: false,
          });
          graphicLayer.addGraphic(graphic); //divText
          graphic.bindPopup(() => {
            this.equipClick(item);
          });
        });
        //  console.log('创建排土场设备点位',this.caikuangRegions)
        this.paituRegions.forEach((item) => {
          const graphic = new mars3d.graphic.BillboardEntity({
            name: "排土场设备",
            position: new mars3d.LngLatPoint(item.SCRX, item.SCRY, 999),
            style: {
              image: this.equipImgList[item.type],
              scale: 0.7,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true,
            },
            attr: {
              名称: item.DEVICENAME,
              数值: "0.01",
              //时间: getYearMateTime(new Date().valueOf()),
            },
            show: false,
          });
          graphicLayer.addGraphic(graphic); //divText
          graphic.bindPopup(() => {
            this.equipClick(item);
          });
        });
      });
    },
    // 广播点位
    async addBroadcastModel(graphicLayer) {
      let { rows } = await listEquipDevice({
        pageNum: 1,
        pageSize: 99,
        type: 2,
      });

      this.broadcastOpenList = rows;
      rows.forEach((item) => {
        const graphic6 = new mars3d.graphic.BillboardEntity({
          name: "应急广播",
          position: new mars3d.LngLatPoint(item.x, item.y, 10),
          style: {
            image: this.imgBbroad,
            scale: 0.8,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            clampToGround: true,
          },
          attr: {
            名称: item.deviceName,
          },
          show: false,
        });
        graphicLayer.addGraphic(graphic6);
        graphic6.bindPopup(`<div class="tipModel" style="width: 300px;border-radius: 20px;z-index:999999;">
              <div class="tipModel_header"></div>
              <div class="tipModel_body">
                <span style="display:block;width: 300px;height: 30px;background-color:#87CEFA;font-size:20px;color:#2a72ad;font-weight:bold;text-align:center;">应急广播信息</span>
  
                <div class="carInfo" style="display:flex;justify-content:space-around;flex-wrap: wrap;background-color: #fff;color:#000">
                  <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">名称&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">${item.deviceName}</span></p>
                  </div>
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">型号&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">位置&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                   <div class="carItem" style="width:40%">
                    <p style="font-size:16px"><span style="font-size:15px;color:#000">安装时间&nbsp&nbsp</span><span style="color:#2A72AD;font-weight:bold">/</span></p>
                  </div>
                  
                </div>
              </div>
            </div>`);
      });

      this.bindLayerPopup(graphicLayer);
    },

    addVideoGraphic(graphicLayer, geoid) {
      listDevice({
        geoId: geoid,
        currentPage: 1,
        pageSize: 999,
      }).then((res) => {
        this.videoOpenList = res.rows;
        this.valueList = res.rows;
        res.rows.forEach((item, index) => {
          const graphic1 = new mars3d.graphic.BillboardEntity({
            name: "视屏监控",
            position: new mars3d.LngLatPoint(item.x, item.y, 6),
            style: {
              image: this.imgVideo,
              scale: 0.4,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true,
            },
            attr: {
              remark: "视屏监控",
              id: item.id,
              cameraIndexCode: item.cameraIndexCode,
              streamType: 0,
              transmode: 1,
              protocol: "rtsp",
              expand: "streamform=ps",
              geoId: item.geoId,
            },
            show: false,
          });
          graphicLayer.addGraphic(graphic1);

          const graphic2 = new mars3d.graphic.BillboardEntity({
            name: "视屏监控",
            position: new mars3d.LngLatPoint(item.x, item.y, 6),
            style: {
              image: item.status == 0 ? this.imgPNG : this.imgPNG2, //
              scale: 0.4,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true,
              pixelOffsetY: -95,
            },
            attr: {
              remark: "视屏监控",
              id: item.id,
              cameraIndexCode: item.cameraIndexCode,
              streamType: 0,
              transmode: 1,
              protocol: "rtsp",
              expand: "streamform=ps",
              geoId: item.geoId,
            },
            show: false,
          });
          graphicLayer.addGraphic(graphic2);
          let that = this;
          graphicLayer.bindPopup(function (event) {
            let { cameraIndexCode, streamType, transmode, protocol, expand } =
              event.graphic.attr;

            // 视频盒子
            const graphic3 = new mars3d.graphic.DivGraphic({
              position: Cesium.Cartesian3.fromDegrees(item.x, item.y, 6),
              name: "视频盒子",
              style: {
                html: `<div style="width: 380px;
    height: 361px;background: rgba(0,0,0,.5);">
    <div style="width: 100%;
    height: 35px;color:#fff;font-weight: 600;
    font-size: 20px;background-color: #0496ff80;line-height: 35px;">
      <div style="margin: 1px 0 0 16px;">位置:${item.deviceName}</div>
    </div>
    
  
      <div id="control_vedio" ref="componentContainer" style="width: 332px;
    height: 300px;
    margin-top: 15px;
    margin-left: 28px;
    position: relative;
    background-repeat: no-repeat;  
    background-size: 100% 100%;">
      
        </div>
      </div>`,
                horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                offsetX: 70,
                offsetY: 50,
              },
              attr: { remark: "示例11", id: item.id },
              show: false,
            });

            graphicLayer.addGraphic(graphic3);
          });
        });
      });
    },

    setMAP(map) {
      console.log(map.getCenter());
      let rotatePoint = new mars3d.thing.RotatePoint({
        direction: false, // 方向 true逆时针，false顺时针
        time: 50, // 给定飞行一周所需时间(单位 秒)，控制速度
        // autoStopAngle: 360, //到达指定角度后自动停止
      });
      map.addThing(rotatePoint);
      let point = Cesium.Cartesian3.fromDegrees(116.181941, 24.423627, 146.6);
      // 开启旋转
      console.log(point);
      rotatePoint.start(point);
    },
    // 创建边界
    addGraphics(graphiBoundaryLayer) {
      // 创建矢量数据图层

      // const tst = require('./home.json');
      const tst = this.home;
      const arr = mars3d.Util.geoJsonToGraphics(tst);

      try {
        for (let i = 0; i < arr.length; i++) {
          const item = arr[i];

          // polygon面
          const polygonEntity = new mars3d.graphic.PolygonEntity({
            positions: item.positions,
            name: "边界坐标",
            pointerEvents: true,
            style: {
              color: item.attr.color,
              opacity: 0.4,
            },
            attr: { item },
            show: false,
          });
          graphiBoundaryLayer.addGraphic(polygonEntity);

          // PolylineEntity线
          // console.log(item.positions);
          //const graphicLine = new mars3d.graphic.PolylineEntity({
          //  positions: item.positions,
          //  name: "边界坐标",
          //  style: {
          //    width: 4,
          //    closure: true,
          //    materialType: mars3d.MaterialType.LineTrail,
          //    materialOptions: {
          //      color: item.attr.color,
          //      speed: 4,
          //    },
          //  },
          //  attr: {},
          //  show: false,
          //});
          //graphiBoundaryLayer.addGraphic(graphicLine);

          // 动态边框文本 DIV
          const graphic = new mars3d.graphic.DivBoderLabel({
            position: polygonEntity.center,
            name: "边界坐标",
            style: {
              text: item.attr.name,
              font_size: 15,
              font_family: "微软雅黑",
              color: "#fff",
              boderColor: "#ecf27d",
              addHeight: 100,
            },
            attr: {
              nam: item.attr.name,
            },
            show: false,
          });
          graphiBoundaryLayer.addGraphic(graphic);
        }
      } catch (error) {
        console.log(error);
        window.location.reload();
      }

      //       mars3d.graphic.BaseGraphic.EventType

      let that = this;
      graphiBoundaryLayer.on(mars3d.EventType.click, function (event) {
        if (event.graphic.name == "边界坐标") {
          let geoid = event.graphic.attr.item.attr.geoId;

          listDevice({ geoId: geoid, currentPage: 1, pageSize: 9999 }).then(
            (res) => {
              if (res.rows.length != 0) {
                that.videoOpenList = res.rows;

                let graphicsList = graphiBoundaryLayer.graphics;

                graphicsList.forEach((item) => {
                  if (item.options.name == "视屏监控") {
                    if (item.options.attr.geoId == geoid) {
                      item.show = true;
                    } else if (item.options.attr.geoId != geoid) {
                      item.show = false;
                    }
                  }
                });
              }
            }
          );
        }
        // 点击摄像头
        if (event.graphic.name == "视屏监控") {
          // that.videoOpen({id:event.graphic.options.attr.cameraIndexCode})
          let videoId = event.graphic.options.attr.id;
          let videoValue;
          that.videoOpenList.forEach((item) => {
            if (item.id == videoId) {
              videoValue = item;
              return;
            }
          });
          that.videoOpen(videoValue);
        }
      });
    },
    //小图片整体点击显示attr内容
    bindLayerPopup(graphicLayer) {
      graphicLayer.bindPopup(function (event) {
        if (
          event.graphic.name == "边界坐标" ||
          event.graphic.name == "视屏监控"
        ) {
          return false;
        }
        const attr = event.graphic.attr || {};
        // attr["类型"] = event.graphic.type
        // attr["安装位置"] = "大顶矿山"
        //
        return mars3d.Util.getTemplateHtml({
          //title: "信息",
          template: "all",
          attr: attr,
        });
      });
    },

    tapk(v) {
      let str = "";
      switch (v) {
        case 1:
          str = "一级预警";
          break;
        case 2:
          str = "二级预警";
          break;
        case 3:
          str = "三级预警";
          break;
        case 4:
          str = "断线";
          break;
        case 5:
          str = "正常";
          break;

        default:
          break;
      }

      return str;
    },
    // },116.180206,24.422703

    // 以下为演示代码
    // addGraphicModelEntity() {
    //   console.log(this.alt);
    //   this.markerList.forEach((item) => {
    //     console.log(item);
    //     let se = bd09towgs84(item.longitude, item.latitude);
    //     const graphic = new mars3d.graphic.ModelEntity({
    //       name: item.carName,
    //       position: [se[0], se[1], item.altitude],
    //       style: {
    //         url: "/mobile/bus.gltf",
    //         scale: 1.5,
    //         minimumPixelSize: 20,
    //       },
    //       flyTo: true,
    //     });

    //     this.graphicLayer.addGraphic(graphic);
    //   });

    //   this.graphicLayer.on(mars3d.EventType.click, function (event) {
    //     console.log("监听layer，单击了矢量对象", event);
    //   });
    // },
    // 加载tilesetLsyer
    addTilesetLayer1(map) {
      if (tiles3dLayer1) {
        map.removeLayer(tiles3dLayer1, true);
        tiles3dLayer1 = null;
      }

      // 加载模型类
      tiles3dLayer1 = new mars3d.layer.TilesetLayer({
        name: "大顶倾斜摄影",
        url: this.formState.txtModel,
        maximumScreenSpaceError: 16,
        maximumMemoryUsage: 1024,
        //popup: "all",
        skipLevelOfDetail: true,
        loadSiblings: true,
        cullRequestsWhileMoving: true,
        cullRequestsWhileMovingMultiplier: 1,
        preferLeaves: true,
        dynamicScreenSpaceError: true,
        preloadWhenHidden: true,
        flyTo: false,
        //clampToGround:true
      });

      // 加载完成事件
      tiles3dLayer1.on(mars3d.EventType.load, (event) => {
        eventTarget.fire("tiles3dLayerLoad", { layer: tiles3dLayer1 });

        console.log("完成");
      });

      // 把模型添加地图上
      map.addLayer(tiles3dLayer1);

      this.tiles3dLayerLoad();
    },
    BD09toWGS84(bd_lon, bd_lat) {
      var x_pi = (3.14159265358979324 * 3000.0) / 180.0;
      var x = bd_lon - 0.0065;
      var y = bd_lat - 0.006;
      var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi);
      var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi);
      var lon = z * Math.cos(theta);
      var lat = z * Math.sin(theta);
      return [lon, lat];
    },
    // 测试1
    addTilesetLayer2(map) {
      if (tiles3dLayer2) {
        map.removeLayer(tiles3dLayer2, true);
        tiles3dLayer2 = null;
      }
      // map.addLayer(tiles3dLayer2);
      // 加载模型类
      tiles3dLayer2 = new mars3d.layer.TilesetLayer({
        name: "大顶倾斜摄影",
        url: "http://mz-ryansystem.com/d2/tileset.json",
        maximumScreenSpaceError: 16,
        maximumMemoryUsage: 1024,
        popup: "all",
        skipLevelOfDetail: true,
        loadSiblings: true,
        cullRequestsWhileMoving: true,
        cullRequestsWhileMovingMultiplier: 1,
        preferLeaves: true,
        dynamicScreenSpaceError: true,
        preloadWhenHidden: true,
        clampToGround: true,

        flyTo: true,
      });
      map.addLayer(tiles3dLayer2);
    },
    // 测试2
    addTilesetLayer3(map) {
      if (tiles3dLayer3) {
        map.removeLayer(tiles3dLayer3, true);
        tiles3dLayer3 = null;
      }
      // 加载模型类
      tiles3dLayer3 = new mars3d.layer.TilesetLayer({
        name: "大顶倾斜摄影",
        url: "http://mz-ryansystem.com/d3/tileset.json",
        maximumScreenSpaceError: 16,
        maximumMemoryUsage: 1024,
        popup: "all",
        skipLevelOfDetail: true,
        loadSiblings: true,
        cullRequestsWhileMoving: true,
        cullRequestsWhileMovingMultiplier: 1,
        preferLeaves: true,
        dynamicScreenSpaceError: true,
        preloadWhenHidden: true,
        // clampToGround:true,

        flyTo: true,
      });

      // map.addLayer(tiles3dLayer3);
    },

    tiles3dLayerLoad() {
      eventTarget.on("tiles3dLayerLoad", (event) => {
        const tiles3dLayer = event.layer;

        const locParams = tiles3dLayer.center; // 取模型中心点信息

        if (locParams.alt < -1000 || locParams.alt > 10000) {
          locParams.alt = 0; // 高度异常数据，自动赋值高度为0
        }
        this.alt = locParams.alt;

        this.formState.transform = tiles3dLayer.transform;
        this.formState.txtX = Number(locParams.lng.toFixed(6));
        this.formState.txtY = Number(locParams.lat.toFixed(6));
        this.formState.txtZ = Number(locParams.alt.toFixed(6));
        // console.log(tiles3dLayer.tileset.maximumScreenSpaceError);
        this.formState.maximumScreenSpaceError =
          tiles3dLayer.tileset.maximumScreenSpaceError;
        // console.log(tiles3dLayer.transform);
        if (tiles3dLayer.transform) {
          this.formState.rotationX = Number(tiles3dLayer.rotation_x.toFixed(1));
          this.formState.rotationY = Number(tiles3dLayer.rotation_y.toFixed(1));
          this.formState.rotationZ = Number(tiles3dLayer.rotation_z.toFixed(1));
          this.formState.scale = tiles3dLayer.scale || 1;
          this.formState.axis = tiles3dLayer.axis;
        } else {
          this.updateHeightForSurfaceTerrain(locParams);
        }
      });
    },

    updateHeightForSurfaceTerrain(position) {
      // 求地面海拔 (异步)
      if (Cesium.defined(position) && Cesium.defined(position.alt)) {
        // 存在历史设置的高度时不用处理
      } else {
        mars3d.PointUtil.getSurfaceTerrainHeight(
          map.scene,
          tiles3dLayer.orginCenterPosition
        ).then((result) => {
          if (!Cesium.defined(result.height)) {
            return;
          }
          const offsetZ = Math.ceil(
            result.height - tiles3dLayer.orginCenterPoint.alt + 1
          );
          console.log(
            "地面海拔：" + result.height.toFixed(2) + ",需要偏移" + offsetZ
          );

          tiles3dLayer.height = offsetZ;

          eventTarget.fire("changeHeight", { alt: offsetZ });
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.my-label {
  color: #fff !important;
  font-weight: 700;
  display: block;
  width: 100%;
  height: 100%;
}

::v-deep(.el-tabs__content) {
  overflow: hidden;
  width: 900px;
}
::v-deep(.mars-dialog__content) {
  overflow: hidden;
}
::v-deep {
  .el-input__inner {
    width: 180px;
    height: 30px;
    border: 0;
    background-color: transparent !important;
  }
}
.main {
  .header {
    .online {
      position: absolute;
      top: 34px;
      right: 25%;
      color: #fff;
    }
    .hunText {
      font-size: 18px;
      position: absolute;
      width: 80px;
      display: none;
      color: #ccc;
      top: -50px;
      // right: 20%;
    }
    .online:hover .hunText {
      display: block;
    }
    // line-height: 55px;
    width: 100%;
    height: 100px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    padding: 5px;
    // padding-top: 10px;
    z-index: 9;

    background-image: url(../../assets/images/hadbgc.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;

    // background-image: url(http://mars3d.cn/project/vue/assets/zhyq-center-title-7d8bfe1a.png);
    // background-size: 100% 100%;
    // background-repeat: no-repeat;

    .logo {
      width: 680px;
      height: 100%;
      margin: auto;
      padding-top: 20px;
      font-size: 27px;
      text-align: center;
      font-weight: 700;
      display: flex;
      justify-content: center;
      background-image: url(../../assets/images/tl.png);
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: #ffee61;
      position: relative;

      &::before {
        content: "";
        width: 70px;
        height: 60px;
        position: absolute;
        top: 10px;
        left: 160px;
        display: inline-block;
        background-image: url(../../assets/s/ddlogo.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
    }

    .menu {
      line-height: 70px;
      color: #fff;
      position: absolute;
      top: 6px;
      left: 50px;

      // height: 60px;
      // background: linear-gradient(180deg,rgba(4,150,255,0) 0%,#0496ff 100%);
      ul {
        display: flex;
        justify-content: center;
        align-items: center;

        .active {
          list-style: none;
          width: 200px;
          height: 55px;
          box-sizing: content-box;
          margin-right: 20px;
          cursor: pointer;
          line-height: 55px;
          background-image: url(../../assets/images/org.png);
          background-repeat: no-repeat;
          background-size: cover;
          font-weight: bold;
          font-size: 20px;

          .liselect {
            display: flex;
            flex-direction: column;
            width: 141px;
            align-items: center;
            text-align: center;
            line-height: 40px;

            div {
              width: 120px;
              height: 65px;
              background: linear-gradient(
                to right,
                rgba(0, 0, 0, 0) 0%,
                rgba(4, 150, 255, 0.8) 50%,
                rgba(0, 0, 0, 0) 100%
              );
              margin-top: 10px;
              line-height: 35px;
              // text-align: center;
              margin-bottom: 10px;
            }

            div:hover {
              background-image: url(../../assets/images/org.png);
              background-repeat: no-repeat;
              background-size: 100% 100%;
            }

            div:last-child {
              border-bottom: 0;
            }
          }
        }

        .menuLi {
          list-style: none;
          width: 200px;
          height: 55px;
          box-sizing: content-box;
          cursor: pointer;
          margin-right: 20px;
          line-height: 55px;
          background-image: url(../../assets/images/ble.png);
          background-repeat: no-repeat;
          background-size: cover;
          font-size: 20px;
          font-weight: bold;

          .liselect {
            visibility: hidden;
            display: flex;
            flex-direction: column;
            border: 1px solid #054f89;
            text-align: center;
            line-height: 40px;

            div {
              height: 40px;
              border-bottom: 1px solid #054f89;
            }

            div:hover {
              background: linear-gradient(
                to right,
                rgba(0, 0, 0, 0) 0%,
                rgba(4, 150, 255, 0.8) 50%,
                rgba(0, 0, 0, 0) 100%
              );
            }

            div:last-child {
              border-bottom: 0;
            }
          }
        }
      }
    }

    .right {
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 5px;
      right: 180px;

      .wind {
        margin-left: 12px;

        i {
          color: #fff;
          font-size: 25px;
        }

        span {
          color: #fff;
          margin-left: 8px;
        }
      }

      .right-le {
        height: 50px;
        display: flex;
        flex-direction: column;
        justify-content: center;

        p {
          height: 0;
          margin: auto;
        }
      }

      .warnText {
        width: 550px;
        height: 20px;
        position: absolute;
        top: 65px;
        overflow: hidden;

        .move-style {
          transform: translateY(-20px);
          transition: all 2s;
        }

        ul {
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          width: 550px;
          height: 20px;

          // border: 1px solid #fff;

          color: #fff;

          li {
            width: 550px;
            height: 20px;
            text-align: center;
          }
        }
      }

      i {
        font-size: 40px;
      }
    }

    .logo-right-time {
      position: absolute;
      height: 90px;
      top: 0;
      right: 26px;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .logo-time-hour {
        font-size: 19px;
        margin: 0;
        font-weight: 500;
        color: #fff;
        text-shadow: 0px 2px 6px #123756;
        background: linear-gradient(0deg, #bee1ff 0%, #ffffff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        .mars-icon {
          margin-right: 10px;
          margin-left: 6px;
          vertical-align: middle;
          line-height: 1;
        }
      }

      .logo-time-year {
        white-space: pre;
        font-size: 14px;
        margin: 0;
        font-weight: 500;
        color: #cdcdcd;
      }
    }

    .fun {
      width: 18%;
      display: flex;
      justify-content: space-around;
      color: #fff;
      align-items: center;

      .date {
        display: flex;
        align-items: center;

        .weather {
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        .time {
          display: flex;
          align-items: center;
          height: 40px;
          margin-left: 20px;
        }

        .time > div {
          margin-left: 10px;
          display: flex;
          height: max-content;
          flex-direction: column;
          font-weight: 500;
        }
      }
    }
  }

  .ryan {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0;
    left: 0;
    background: #233633;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999999;

    .footer {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .font_a {
        display: flex;
        align-items: center;

        p {
          font-size: 14px;
          font-weight: 400;
          color: #fff;
          white-space: nowrap;
        }

        span {
          display: inline-block;
          white-space: nowrap;
          font-size: 14px;
          font-weight: 400;
          color: #fff;
          display: flex;
          align-items: center;
          margin-right: 10px;

          .foot-imga {
            display: inline-block;
            width: 40px;
            height: 35px;
            margin-right: 5px;
          }

          .foot-imgb {
            display: inline-block;
            width: 88px;
            height: 10px;
            margin-right: 5px;
          }

          a {
            text-decoration: none;
            display: inline-block;
            color: #fff;

            &:hover {
              color: #1376e4;
            }
          }
        }

        &:nth-child(2) {
          margin-left: 30px;
        }
      }
    }
  }

  ::v-deep .el_dialog_ryan {
    background: #3d3d3d;
    border-radius: 15px;

    .el-dialog__header {
      .el-dialog__title {
        color: #fff;
      }
    }
  }
}

.chart {
  height: 100%;
}

.loading {
  min-height: 100vh;
  background: #414a56;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* // transition: all 0.2s inherit; */
  animation: ball 0.5s ease-out;
  animation-iteration-count: 1;
  position: relative;
}

.load_show {
  position: absolute;
  z-index: 9999;
  color: #fb708c;
  font-size: 18px;
  top: 50%;
  left: 50%;

  transform: translate(-50%, 350%);
}

#marsGreenGradientPnl {
  width: 100px;
  text-align: center;
  background-image: linear-gradient(to right, #565d39, #00ffc3);
  position: absolute;
  /* left: -56px;
  bottom: 28px; */
  border-radius: 10px;
  cursor: pointer;
  padding: 5px;
  color: #fff;
  border: 1px solid #9c9944e8;

  animation: animMarker 0.4s ease-in-out infinite alternate;
}

#marsGreenGradientPnl:hover {
  border: 2px solid rgb(9, 255, 0);
}

#marsGreenGradientPnl::before {
  position: absolute;
  content: "";
  left: 50%;
  bottom: -30px;
  height: 30px;
  border-left: 2px dashed #c5e22770;
}

#marsGreenGradientPnl-highlight {
  border: 2px solid yellow;
}

#marsGreenGradientPnl-highlight::before {
  border-left: 2px dashed yellow !important;
}

@keyframes animMarker {
  0% {
    transform: rotate(0deg) translate(0px, 5px);
  }

  100% {
    transform: rotate(0deg) translate(0px, -5px);
  }
}

@keyframes animShadow {
  0% {
    transform: scale(0.5);
  }

  100% {
    transform: scale(1);
  }
}

.flBox {
  .videoList {
    width: 340px;
    overflow: hidden;
    height: calc(100% - 157px);
    position: absolute;
    box-sizing: border-box;
    padding: 10px;
    z-index: 99;
    right: 20px;
    top: 100px;
    transition: all 0.5s;
    border-bottom: 1px solid #008aff70;
    border-left: 1px solid #008aff70;
    border-right: 1px solid #008aff70;
    box-shadow: 0 4px 15px 1px #02213bb3;
    border-radius: 0;
    background-color: rgba(23, 49, 71, 0.8);
    ::-webkit-scrollbar {
      width: 2px !important;
    }
    ::-webkit-scrollbar-track {
      background-color: rgba(0, 0, 0, 0);
    }
    &.bro-show {
      transform: translate(200%, 0);
    }

    .mars-dialog__header {
      width: 100%;
      line-height: 44px;
      overflow: hidden;
      height: 41px;
      line-height: 41px;
      font-size: 18px;

      background: url();
      background-size: 10px 44px;
      padding: 0 5px 0 10px;
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;

      .title {
        font-size: 16px;
      }

      &::after {
        content: "";
        display: block;
        width: 50px;
        height: 35px;
        position: absolute;
        left: 0px;
        top: 0;
        border-top: 1px solid rgba(0, 138, 255, 0.9);
        border-left: 1px solid rgba(0, 138, 255, 0.9);
      }

      .mars-icon {
        float: right;
        cursor: pointer;
        margin-top: 12px;
        color: #fff;
        vertical-align: middle;
        line-height: 1;
      }
    }

    .mars-dialog__content {
      height: 100%;
      overflow: scroll;
      padding: 5px 5px 20px;
      margin-top: 35px;
      .paiwutitle {
        text-align: center;
        color: #fff;
        font-size: 20px;
      }
      .paiwuContent {
        display: grid;
        padding: 48px 6px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 8px;
        grid-template-rows: 40px 40px 40px 40px 40px 40px;

        .paiwuItem {
          text-align: center;
          color: #fff;
          line-height: 40px;
        }
        .zc {
          background-color: #0dbc79;
          border-radius: 19px;
        }
      }
      .caikuangEquip {
        ::-webkit-scrollbar {
          width: 2px;
        }
        ::-webkit-scrollbar-track {
          background-color: rgba(0, 0, 0, 0);
        }
        height: 25%;
        .equipEchart {
          height: 100%;

          color: #6997f2;
        }
        .histList {
          height: 20%;
          color: #fff;
        }
        .equipItem {
          color: #fff;
          font-size: 14px;
          .title {
            font-size: 16px;
            margin: 8px auto !important;
            img {
              display: inline-block;
              width: 30px;
              height: 30px;
              vertical-align: middle;
            }
            span {
              display: inline-block;
            }
            .equiplist_name {
              width: 33%;
              //overflow: hidden;
            }
            .equiplist_value {
              margin: 0 10px;
              width: 20%;
            }
            .equiplist_time {
              width: 40%;
            }
          }
          .equiplist {
            overflow-y: scroll;
            height: 200px;
            p {
              width: 100%;
              span {
                display: inline-block;
              }
              .equiplist_name {
                width: 33%;
                overflow: hidden;
              }
              .equiplist_value {
                margin: 0 10px;
                width: 20%;
              }
              .equiplist_time {
                width: 40%;
              }
            }
          }
        }
      }
      ul {
        // visibility: hidden;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        border: 1px solid #054f89;
        text-align: center;
        line-height: 40px;

        li {
          height: 80px;
          border-bottom: 1px solid #054f89;
          color: rgb(228, 244, 255);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          .svgIcon {
            width: 50px;
            color: #fff;

            fill: #123756 !important;
          }
        }
        .active {
          background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(4, 150, 255, 0.8) 50%,
            rgba(0, 0, 0, 0) 100%
          );
        }
        li:hover {
          background: linear-gradient(
            to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(4, 150, 255, 0.8) 50%,
            rgba(0, 0, 0, 0) 100%
          );
        }

        li:last-child {
          border-bottom: 0;
        }
      }

      .yjzy-search {
        height: 42px;
        overflow: hidden;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border: 1px solid rgba(0, 138, 255, 0.9);
        background: rgba(23, 49, 71, 0.8);
        width: 100% !important;

        .input {
          border: none;
          background: none;
          height: 44px;
          outline: none;
          padding-left: 10px;
          flex-grow: 1;
          font-size: 15px !important;
          color: #fff;
          background-color: transparent !important;
        }

        .ant-input:placeholder-shown {
          text-overflow: ellipsis;
        }

        .button {
          height: 100%;
          width: 55px;
          font-size: 14px;
          background: rgba(0, 138, 255, 0.5);
          border: none;
          padding-left: 10px;
          padding-right: 10px;
          color: #fff;

          .mars-icon {
            font-size: 18px !important;
            line-height: 18px;
            vertical-align: middle !important;
            padding-left: 2px;
            padding-right: 2px;
          }
        }
      }

      .yjzy-content {
        height: calc(100% - 100px);
        position: relative;
        box-sizing: border-box;
        margin-top: 10px;
        background: rgba(0, 48, 64, 0.4);
        border: 1px solid rgba(64, 108, 130, 0.4);
        border-radius: 5px;
        overflow: hidden auto;

        .search-list {
          width: 100%;
          padding: 0px 10px;
          margin-top: 10px;
          float: left;
          box-sizing: border-box;

          .container1 {
            padding: 0px 0px 5px;

            .container2 {
              cursor: pointer;
              position: relative;
              padding: 10px 10px 10px 35px;

              .numSpan {
                position: absolute;
                left: -2px;
                top: 15px;
                padding-right: 3px;
                width: 33px;
                height: 16px;
                line-height: 16px;
                background: url()
                  center center / 100% 100% no-repeat;
                text-align: center;
                font-size: 12px;
                font-family: DIN;
                font-weight: 600;
                font-style: italic;
                color: rgb(255, 255, 255);
              }

              &::after {
                content: "";
                width: 361px;
                height: 1px;
                position: absolute;
                left: 0px;
                background: linear-gradient(
                  90deg,
                  rgba(0, 138, 255, 0) 0%,
                  rgba(0, 138, 255, 0.98) 48%,
                  rgba(0, 138, 255, 0) 100%
                );
                opacity: 0.4;
                top: -5px;
              }

              .line1 {
                color: rgb(38, 221, 255);
                padding-right: 30px;
                position: relative;
                margin-left: 10px;

                .typeLabel {
                  right: 36px;
                  color: rgb(146, 185, 204);
                  font-size: 12px;
                  position: absolute;
                  top: 0px;
                }

                .typeLabel_detail {
                  color: rgb(38, 221, 255);
                  font-size: 12px;
                  position: absolute;
                  right: 0px;
                  top: 0px;
                }
              }

              .line2 {
                font-family: 宋体;
                color: rgb(146, 186, 205);
                font-size: 12px;
                line-height: 20px;
              }

              .line3 {
                font-family: 宋体;
                color: rgb(146, 186, 205);
                font-size: 12px;
                line-height: 20px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }

  .useFun {
    width: 340px;
    height: calc(100% - 157px);
    position: absolute;
    box-sizing: border-box;
    padding: 10px;
    z-index: 99;
    transition: all 0.5s;
    top: 100px;
    left: 20px;
    border-bottom: 1px solid #008aff70;
    border-left: 1px solid #008aff70;
    border-right: 1px solid #008aff70;
    box-shadow: 0 4px 15px 1px #02213bb3;
    border-radius: 0;
    background-color: rgba(23, 49, 71, 0.8);

    .mars-dialog__header {
      width: 100%;
      line-height: 44px;
      overflow: hidden;
      height: 41px;
      line-height: 41px;
      font-size: 18px;

      background: url();
      background-size: 10px 44px;
      padding: 0 5px 0 10px;
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;

      .title {
        font-size: 16px;
      }

      &::after {
        content: "";
        display: block;
        width: 50px;
        height: 35px;
        position: absolute;
        left: 0px;
        top: 0;
        border-top: 1px solid rgba(0, 138, 255, 0.9);
        border-left: 1px solid rgba(0, 138, 255, 0.9);
      }

      .mars-icon {
        float: right;
        cursor: pointer;
        margin-top: 12px;
        color: #fff;
        vertical-align: middle;
        line-height: 1;
      }
    }

    &.bro-show {
      transform: translate(-200%, 0);
    }

    .liselect {
      display: flex;
      flex-direction: column;
      border: 1px solid #054f89;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
      margin-top: 40px;

      div {
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #054f89;
        color: rgb(38, 221, 255);
        display: flex;
        display: flex;
        justify-content: center;
        align-items: center;

        .inBox {
          display: flex;
          font-size: 20px;
          width: 42%;
          height: 100%;

          align-items: center;

          .svgIcon {
            width: 25px;
            color: #fff;
            margin-right: 10px;
            fill: #123756 !important;
          }
        }
      }

      div:hover {
        background: linear-gradient(
          to right,
          rgba(0, 0, 0, 0) 0%,
          rgba(4, 150, 255, 0.8) 50%,
          rgba(0, 0, 0, 0) 100%
        );
        color: #fff;
      }

      div:last-child {
        border-bottom: 0;
      }
    }
  }

  .panel-item {
    width: 100%;
    background-image: url(http://template.hfxtsk.cn/city/static/png/panel-small-9e0d7004.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 25px;

    .title {
      width: 100%;
      height: 28px;
      background-image: url(http://template.hfxtsk.cn/city/static/png/panel-header-small-35af3edf.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      font-size: 20px;
      font-weight: 400;
      color: #fff;
      padding-left: 5px;
      position: relative;
      display: flex;
      align-items: center;
      margin: 0;
      z-index: 999;

      p {
        position: absolute;
        color: #fff;
        z-index: 9999999;
        left: 45px;
      }
      // font-family: YouShe;
      .header-icon {
      }
    }

    .panel-content {
      width: 100%;
      height: 100%;
      color: #fff;
      position: relative;
      .panel-card {
        margin-top: 30px;
        display: grid;
        grid-template-columns: repeat(2, 120px);
        grid-template-rows: repeat(2, 120px);
        grid-gap: 60px;
        justify-content: center;
        align-content: center;
        .panel-card-item {
          //background-color: #000;
          text-align: center;
          font-size: 18px;
          .panel-card-item:nth-child(1) .panel-card-item-num {
            color: #038df8;
          }

          .panel-card-item-num {
            font-size: 30px;
            font-family: Digital dream Fat;
            font-weight: 400;
            font-style: italic;
          }
          .panel-card-item-text {
            font-size: 14px;
          }
          img {
            width: 100%;
            //height: 100%;
          }
        }
      }
      .num {
        p {
          position: absolute;
          top: 30px;

          span {
            font-size: 40px;
            color: #3defef;
          }
        }

        img {
          width: 100%;
          height: 180px;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }

    :nth-child(3) {
      margin: 0;
    }
  }

  .leftPanel {
    position: absolute;
    top: 80px;
    left: 32px;
    width: 420px;
    height: calc(100vh - 189px);
    z-index: 1;
    bottom: 0;

    .panel-item {
      position: relative;
    }
  }

  .rightPanel {
    position: absolute;
    top: 80px;
    right: 32px;
    width: 420px;
    height: calc(100vh - 189px);
    z-index: 1;
    bottom: 0;
  }

  .centerPanel {
    margin: auto;
    z-index: 1;
    position: absolute;
    height: calc((100vh - 189px) / 3) !important;
    width: calc(100vw - 500px);
    left: 50%;
    top: 66%;
    // bottom: 11px!important;
    display: flex;
    transform: translate(-50%);

    // margin-bottom: 25px;
    .panel-item:nth-child(1) {
      margin-right: 10px;
    }

    .panel-item:nth-child(2) {
      margin-left: 10px;
    }
  }

  .centerPanel2 {
    width: calc(100vw - 864px) !important;
    margin: auto;

    .panel-item:nth-child(1) {
      margin-right: 0;
    }
  }
}

.tipModel11 {
  display: flex;
  flex-wrap: wrap;
  border-radius: 20px;
}
.weiEquipBox {
  margin: 0;
  padding: 0;
  width: 200px;
  height: 300px;
  //background-color: #fff;
  position: absolute;
  right: -40px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background-image: url(http://template.hfxtsk.cn/city/static/png/panel-small-9e0d7004.png);
  li {
    padding: 3px;
    cursor: pointer;
    font-size: 16px;
    text-align: center;
  }
  li:hover {
    background-color: #75a5c3;
  }
}
.alarmLists {
  p {
    display: flex;
    justify-content: space-between;
    span {
      padding: 8px 20px;
    }
  }
}
.alarmLists2 {
  span {
    font-size: 20px;
    font-weight: 700;
  }
}
.showImg {
  position: relative;
  width: 100%;
  height: 90%;
  //margin: 100px auto;
  overflow: hidden;
}
.areadatepicker {
  position: absolute;
  right: -60px;
  top: -30px;
  z-index: 999999;
}
/* 轮播图片 */
.showImg img {
  width: 100%;
  height: 100%;
}

/* 箭头图标 */
.iconDiv {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border: 1px solid #666;
  border-radius: 15px;
  background-color: rgba(125, 125, 125, 0.2);
  line-height: 30px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
}
.iconDiv:hover {
  background-color: white;
}
.icon-left {
  left: 10px;
}
.icon-right {
  right: 10px;
}

/* 控制圆点 */
.banner-circle {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
}
.banner-circle ul {
  margin: 0 50px;
  height: 100%;
  text-align: right;
}
.banner-circle ul li {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 5px;
  border-radius: 7px;
  background-color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
}
.active99 {
  background-color: #118fe7 !important;
}
.equipMapList {
  width: 28%;
  .equiBox {
    max-height: 600px;
    overflow: auto;
  }
  p {
    display: flex;
    justify-content: space-between;
  }
  span {
    width: 30%;
  }
}
</style>
